cancel
Showing results for 
Search instead for 
Did you mean: 

Column Chart - Change the Default Column Width

Ophir_Buchman
12 - Data Integration
12 - Data Integration

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
Ophir_Buchman_0-1646734484089.png Ophir_Buchman_1-1646734496701.png
1 ACCEPTED SOLUTION

harikm007
13 - Data Warehouse
13 - Data Warehouse

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
})

 

harikm007_0-1646894429164.png

-Hari

View solution in original post

3 REPLIES 3

harikm007
13 - Data Warehouse
13 - Data Warehouse

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
})

 

harikm007_0-1646894429164.png

-Hari

JamieR
7 - Data Storage
7 - Data Storage

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.