Wijmo Charts: Bar Chart properties

Wijmo Charts: Bar Chart properties

Posted by: reeshabh.choudhary on 5 September 2019, 7:04 am EST

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 5 September 2019, 7:04 am EST

  1. How to reduce width of Bar Charts?
  2. How to reduce width between 2 bar charts?
• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 6 September 2019, 1:08 am EST

  Hi,

  There is no direct method to change the width of the bar chart. You will need to handle the rendered event of the FlexChart and change the width of the rect element of each of the bar. Please refer to the code snippet and the sample below:

  onRendered(s, e) {
  	let elements = e.engine.element;
  	let series = elements.querySelectorAll('.wj-series-group g');
  	series.forEach((s, idx) => {
  		// only change the width of the 1st and 2nd series
  		if(idx !== 2) {
  			s.querySelectorAll('rect').forEach((rect) => {
  				rect.setAttribute('width', '20');
  			});
  		}
  	});
  }
  

  https://stackblitz.com/edit/angular-fmwsbq

  Regarding the width between the charts:

  We are sorry but this is not possible. The FlexChart calculates the width between each bar according to the dimensions. So, the width automatically changes as the chart resizes.

  Regards
  
  Ashwin

• 

  reeshabh.choudhary

  • Post Options:
  • Link
    Copy

  Posted 6 September 2019, 7:01 am EST - Updated 3 October 2022, 7:26 pm EST

  

  787×535 34.7 KB

  I want to reduce the marked space between chart and information labels.

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 9 September 2019, 12:07 am EST

  Hi,

  To reduce the gap between the axis title and the axis line, you may handle the rendered event of FlexChart and change the “y” attribute of the axis title:

  let axisYLabel = elements.querySelector('.wj-axis-y g text');
  axisYLabel.setAttribute('y', (+axisYLabel.getAttribute('y')) + 20)
  

  You may also refer to the sample below:

  https://stackblitz.com/edit/angular-lwtpgl

  ~regards