I want to reduce the distance between the columns.
I was trying : plot Options column: pointPadding , border Width , pointWidth
Code:
`https://jsfiddle.net/x1m0et85/2/`
I need something like the first picture
THANK YOU!
You should be able to reduce this distance by setting groupPadding.
API: https://api.highcharts.com/highcharts/plotOptions.column.groupPadding
Demo: https://jsfiddle.net/BlackLabel/6v8bdky4/
Related
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/
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.
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 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
I have a LineChart with 4 lines and their legends are long so I can only see the first two... I tried to put a ScrollView but it didn't work. What can I do? Thank you
Some ideas:
Shorten the series titles so that you get shorter stuff in the legend.
Increase the legend height renderer.setLegendHeight();
Make the legend auto-resizable renderer.setFitLegend(true);