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
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 need the points of my chart to have a fixed width (say, 100px each). If the needed space exceed the width of the chart, I just want to be able to scroll horizontally (with the scrollbar.enabled parameter set to true).
This is the basic setup, without setting the points width:
http://jsfiddle.net/wxxdne19/
If I set the column width like this:
http://jsfiddle.net/wxxdne19/1/
The tickPixelInterval parameter is ignored (as the documentation says, of course).
I tried a bunch of other things, but none of them worked, and I ran out of ideas. How can I do what I need?
Update
To clarify what I need, think of it as if I have a column chart, and I need to force all the columns to have a fixed width. Something like this:
http://jsfiddle.net/4rx4snjh/
But, instead of the columns overlapping each other, I'd like the scrollbar to do its job :-) Furthermore, I need it to work with any kind of series (lines, areas...), not just columns.
It seems that the solution here is to compute extremes manually and set them in load event:
load: function() {
var chart = this,
xAxis = this.xAxis[0],
visibleColumns = (xAxis.width - pointWidth) / pointWidth;
xAxis.setExtremes(pointStart, pointStart + pointInterval * visibleColumns);
}
Live demo: http://jsfiddle.net/kkulig/mpancrbc/
For some reason (bug probably) xAxis.min value must be initialized when the container width is a small value (in my example it's less that 400 px or so).
API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes
Highcharts columns sometimes don't make proper use of the available height, in some cases leaving nearly the upper half of a chart empty. After fiddling with the official example charts I noticed that the y-axis max extreme (internally) seems to be dependent on the chart's container height.
For example, the Highcharts example for stacked column chart:
The original example (container height of 400px) has a max of 12.5 for the y-axis with the largest columns having a value of 11. ~90% of the chart height are used.
When modifying the height to 300px, y-axis max changes to 15, so that only ~75% of the height is used.
When modifying the height to 200px, y-axis max changes to 20, only ~55% of the height being used.
Is there a way to improve this behavior without programmatically setting the axis extremes whenever the displayed data changes? You might argue that applying such a small height to a column chart is a weird thing to do, but this is just an example, I have seen similar behavior with larger charts (having other data).
This is related with fact, that defaulty highcharts has enabled maxPadding. Set that parameter as 0 to fillout area more efficient.
yAxis: {
maxPadding:0
}
The example charts could be fixed with Sebastian's answer. After applying the change to my own chart, I noticed another problem that screwed up the scale even more, but was not part of this question - adding this as another answer, just for the sake of completeness.
My chart consisted of combined column/line chart with a 2nd y-axis. Depending on its values, the line chart series had strange effects on the scale of the columns (even if the line chart series was empty). Doing some more research I found this SO answer pointing me to Highcharts' alignTicks option, setting it to false resolved the issue.
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
This functionality is available for the Pie Chart via the plotOptions size parameter, however after inspecting the Highcharts API the size isn't available for the Gauge.
size API entry for Pie Chart
Considering the likeness of the two charts (being circular), I was hoping there would be a similar option but the gauge always fills some subset of the container div that I am unable to control. Has anyone else run into this issue or found a solution?
By setting the spacing to zero, you can fill the entire space:
http://jsfiddle.net/mkremer90/3sngK/1/
Fiddle with the spacing parameters to change how much the chart fills. As for a percentage based like size option I can't find one either.
I know this is old, but if like me, you have borderWidth set to something greater than 0, you'll find yourself with the tag being positioned (e.g. x="5.5" y="5.5") off from the corner and width and height shrunk. Setting spacing and margin options won't help in this case.
The simple solution then is to avoid setting borderWidth to anything at all; just leave it default or set it to zero. Instead, set the border on the container element you're calling highcharts on.
Alternatively, you could set negative margins and increase size on the container element to compensate for position shift and size shrink on the graph. Might need to wrap the container in a div with style="overflow: hidden;".