I have a grouped bar chart. After using pointWidth to reduce thickness of the bars, I can't find a right value for pointPadding and groupPadding to reduce the space between bars, and the space between groups.
Please see:
http://jsfiddle.net/theactiveactor/64ghpk1v/
Related
I have a few histograms. Each of them have different data. How can I make the bar width the same across all histograms and no gaps between bars ?
Here's an example of my histograms
To set bar width you need to set pointWidth
A pixel value specifying a fixed width for each column or bar. When null, the width is calculated from the pointPadding and groupPadding.
You can't set the distance between the bars the same without resizing what you see. That means you either have to set the size of the highcharts div appropriately, or you need to set min and max for the chart so that the same number of bars will be in each histogram.
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/
I have more than 4 bar charts in a coreplot graph.When the number of charts become more than 3,the charts becomes overlapping and cannot differentiate between the X axis labels.
How to increase the tick space between the x axis labels so that space always remains between the 2 x -axis labels?
The below image is when I have 3 bar charts,then the spacing looks good.
the below image is when I have more charts then there is no spacing between the ticks.
Reduce the barWidth and adjust the barOffset of each plot accordingly. This will allow more bars to fit between each label on the x-axis. You'll also need to reduce the length of the plot space xRange and/or make the graph wider to spread out the plots so the data labels don't overlap.
This is not DUPLICATED!!! Sorry if yes.
I want to increase the space between columns independently to the pointWidth property and the #container width. Please this couple of pictures
and the fiddle is here
How can I edit this space/margin/padding ?
In your current chart, the number of bars you have, combined with the fixed pointWidth of 14 (pixels) you have set on each series, means that the groupPadding setting which you have not set and therefore defaults to 0.2 (x-axis units) is squashing the bar pairs together, overriding any increase you try to set to pointPadding.
If you reduce groupPadding, like so, the pairs will come apart accordingly. If your number or bars and/or chart width are variable, and you want to fix the ratio of the gaps between points and groups, then set your pointPadding and groupPadding as required, and remove the fixed pointWidths you have specified so that the bar widths take up the slack, like this.
You can use pointRange / groupPadding / pointPadding, skipping pointWidth.
http://api.highcharts.com/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.