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
Related
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.
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 am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement
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;".