Control spacing between bars in Highcharts grouped bar chart - highcharts

I have two bar charts, drawn using highcharts library, on a single page. I need to maintain same width for bars and same spacing between bars in a group, across these charts. Size of container is different across the charts and fixed as per the UI layout.
Snippet of plot options:
series: {
grouping:true,
groupPadding:0.12,
borderWidth: 0,
events: {
legendItemClick: function () {
return false;
}
}
}
I have tried various combinations and a jsfiddle link is here - http://jsfiddle.net/U6mhy/29/
In the above link, though the bar width is same between the two charts, spacing between bars in a single group is not same. In fact, bars in chart1 hardly appear to be grouped.
I have tried specifying different values of groupPadding, pointPadding and pointWidth but unable to achieve consistent spacing between bars across these charts.
Please suggest if any other combination of options can help me achieve this.
-Thanks

Just to make it clear, you can use one of (not both):
pointWidth: forces Highcharts to draw bars with fixed width,
pointPadding + groupPadding: calculates width of the bar according to these values and chart width/height
Just think about this: how to set the same width of the bar for all charts when you have different number of bars? And the answer is to change charts' width according to number of columns. For example you have 4 bars? Chart height/width will be sum: 4 x 10px + some_padding. If you have 10 bars, when height/width will be: 10 x 10px + some_padding (the same as above). I hope that's what you want to achieve.

Related

Fixed plot height in scatter chart

I have been searching this but not able to get any solutions for this. I want my scatter chart to be of fixed height regardless of no of legends used.
Please look into below fiddle link:
http://jsfiddle.net/3o982ewu/118/
"chart": {
"type": "scatter",
"zoomType": "xy",
"plotBorderWidth": 2,
"width": 400,
"height":400,
.....
I have set chart height to be 400. If no of legends increase, then scatter chart height gets adjusted (decrease) accordingly. You can try increasing the legends and notice that chart height gets decreased. I have tried other options like setting margin top and bottom (suggested in one post) but no luck.
I see that in highcharts js, there is 'plotHeight' variable which is used to set the chart height but I find no means to set it from my code or provide into as chart options. This scatter chart will be displayed in pdf so there is no scope of adding pagination, scrolls or any other stuff which is feasible only in web browser but not in pdf.
I am answering my own question because I found a way to deal with this scenario.
We hid the legends on the chart, so this way plot height of the chart will be always fixed. (plotHeight will be equal to the height of the chart which we provide in the chart settings considering we don't supply any margins)
We stored the data points (color of the legend and legend name) in the array and printed those outside the chart to make them appear as legends.

maxPointWidth causing more gaps for bars within each x point, in basic Column chart

Using HighChart, I wanted to create grouped column chart with max width, so that when there are less points on x axis the bar does not look wide.
I found some property maxPointWidth which can be applied to achieve the same. but using this there is a gap for each bar within x-point.
How to remove this gap ? I have tried pointPadding:0 as well seems this does not help
I am expecting chart something like below.
Fiddle: https://jsfiddle.net/mcshiva0507/hx83bbzb/2/
groupPadding will help. https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
plotOptions: {
series: {
groupPadding:0.45,
maxPointWidth: 10
}
},
https://jsfiddle.net/mcshiva0507/hx83bbzb/2/

How to align multiple charts with different data

I have three pie charts displayed in a row. Two have two segments, one has five. All three have vertical legends.
Given that, the chart with five segments displays the pie slightly smaller, due to the extra height of the legend. It also has a slight negative vertical offset.
Is there any way I can set all three charts to render the chart in the same position? I've tried setting the center to 50%,50% in plotOptions, didn't help.
You have to set the marginBottom-Value of the chart to a value that is equal an all charts. Highcharts is trying to display the pie as big as possible, therefore it will use more space if the legend is not as big.
By setting the marginBottom you force the chart to ignore the actual legend size.
The center: ['50%','50%'] setting will only take into account the actual plot area. So if this area is decreased because of a taller legend it has no effect.
I made a jsfiddle where you can explore this settings:
http://jsfiddle.net/doc_snyder/dsmgy6ts/

how to pad y-axis for highcharts?

by default without touching the axis, highcharts try to use as much space as possible, what if I want to leave about half an inch on top or bottom because I want to put a logo there. How can I set option so that there is padding on the yaxis basically?
-------------1
-------------2
-------------3
-------------4
ie chart goes from 1 to 4 but series should be plotted within 2 to 3 only.
You can use the minPadding and maxPadding options:
yAxis: {
maxPadding: 0.2,
minPadding:0.2
},
http://api.highcharts.com/highcharts#yAxis.maxPadding
You can also define spacing to add more space above axis.

align chart columns left/right

I'm trying to align columns to the left in my chart. By default they are in the middle.
I can't find anything about this in the API documentation.
Here is a jsFiddle test.
In the highcharts api, have you examined the group padding feature?
http://www.highcharts.com/ref/#plotOptions-column--groupPadding
plotOptions: {
series: {
groupPadding: 0
}
},
If the columns appear too wide when you set the groupPadding to 0,
you can still play with the pointPadding. http://www.highcharts.com/ref/#plotOptions-column--pointPadding
(If that doesn't fit your needs, I guess I'm a bit perplexed,
because I don't see how having chart columns aligned to the left,
then followed by a big blank space on the right, would make
for a well-designed chart...)
you can trying using the margin option http://www.highcharts.com/ref/#chart--margin
or the margin left option http://www.highcharts.com/ref/#chart--marginLeft
or the spacing left option http://www.highcharts.com/ref/#chart--spacingLeft

Resources