Column Chart - Change the Default Column Width

[Ophir_Buchman]

When creating a column chart, you may want to control the width of the columns. To do so add the following script to your column widget:

const newWidth = 5

widget.on('domready', function(widget) {
  try {
    console.log('DOM Ready script starting (wid=' + widget.oid + ')');
    rectangles = Array.from($('rect.highcharts-point'))
    rectangles.forEach(function(element) { 
      element.setAttribute('width',newWidth) 
    });
  }
  catch (error) {
    debugger;
    console.error(error);
  }
  finally {
    console.log('DOM Ready script complete (wid=' + widget.oid + ')');
  }
});

Before	After

[harikm007 · Accepted solution]

An alternate script to control column width and space between bars/columns:

widget.on('processresult',function(se,ev){
	ev.result.plotOptions.series.pointWidth = 20 //width of bar
	ev.result.plotOptions.series.groupPadding= 0.3 //space between bars
})

-Hari

[JamieR]

Is it possible to do this for just one specific Value? Like for example, I want to show one value in front of the other, with the one in front as a narrow bar and the one behind as a wide bar. 

[harikm007]

Try this script: https://www.binextlevel.com/post/columns-chart-with-fixed-placement

Thanks,

Hari