From the picture above you can see the problem with overlapping columns.
I've tried with groupPadding but it does seem to work.
I prepared a jsffidle http://jsfiddle.net/cr1t/r7yyN/
Any Ideas?
When you set pointWidth, then groupPadding is omitted. Remove pointWidth and you will get proper result: http://jsfiddle.net/r7yyN/1/
Also, you have different groupPadding for series, which may cause overlaping.
Related
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 am using highstock and tried to move the points on a spline serie on the xAxis by setting pointPlacement:0.5. But it seems that it does not work on splines or lines. If I define the series as column it works as expected. With reference to the Highstock Options Reference I think this should work as well for other chart types as this option is also listed under the spline description
Is there any other way to get the points shifted along the xAxis.
I set up a jsfidle to demonstrate the problem. http://jsfiddle.net/pb4Mz/
pointPlacement works only in the column chart.
I have the following issues while working with stacked column charts:
Firstly,look at the following chart:
http://jsfiddle.net/QnuEA/
If you notice the time range is wide, the columns appear too thin. I know that setting pointWidth is one option. But actually the chart should be appearing as they would if the time interval range is narrow as follows:
http://jsfiddle.net/QnuEA/1/
The expectation is x-axis interval must adjust itself.
Secondly, for the same chart as above, if the width of the chart is more (say 900 px or so), the x-axis seems to have a lot of empty space before the first tick.
Is there a solution to this? (I am unable to post more than 2 jsfiddle links here.So I am not providing a link for this issue)
You need to define pointRange as timestamp
http://jsfiddle.net/QnuEA/3/
I am creating a column chart using highcharts, I need to specify the width of the column and I am able to achieve that using the plotOptions.column.pointWidth property, after that I need to specify the distance between the columns in pixels, and I don't find anything in the API about it, I tried using plotOptions.column.groupPadding and plotOptions.column.pointPadding but they don't work if the column width is fixed. Please let me know how to achive that.
In addition to specifying the space between columns, I would like to give the columns a background color that spans the entire y-axis.
Do you mean something like in this:
Unfortunately you can set or fixed width for columns (as you are using) or floating width using groupPadding and pointPadding. Highcharts doesn't provide option to set fixed width for bars and between them. You can create an idea here: http://highcharts.uservoice.com/forums/55896-general
my column chart is not using all space available. The columns could be thicker, but when I change the pointWidth to a higher value, the columns get thicker, but instead of occupying more of the available white space, they just start to overlap.
Here is the chart.
Thanks for any hints.
Two things:
update Highcharts to latest version if possible (2.3.5)
your series contains three points, [ value, value, NaN] - you probably have an extra end line "\n" in your CSV. Add checking if parseFloat isn't returning NaN (use isNaN() function).
If you change pointWidth you should also care about groupPadding / pointPadding which define space betweet points/groups.
http://api.highcharts.com/highcharts#plotOptions.column.pointPadding
http://api.highcharts.com/highcharts#plotOptions.column.groupPadding