Develop Reference

Highcharts - How to show more than 30 columns side by side

I'm using Highcharts 6.1.1 with react-highcharts 16.0.0. When I create a 'column' style chart with 30 series or less, the data points with matching x-values all are arranged side by side:
But, if i add another series, bringing the total to 31, Highcharts no longer groups the columns side by side, and instead renders them all in the same place, not stacked, just overlapping:
I can't seem to find a setting in highcharts config to change this grouping threshold, and have experimented quite a bit with setting paddings and widths and such to try to maximize the number of columns it will show side by side, but i can never get it to work with more than 30 series.

When you are using the boost module, columns are always one pixel wide. Additionally, a lot of functionality (such as grouping, which causes this problem) is disabled when the boost module works.
Here: https://github.com/highcharts/highcharts/issues/6600, you have very well explained the assumptions of this module.
To work around, you can use decimal x values:
series: [{
data: [1]
}, {
data: [2, 2]
}, {
data: [{
x: 0.3,
y: 1
}]
}, {
data: [2]
}, ... ]
Live demo: http://jsfiddle.net/BlackLabel/8bq9yL4f/

The problem was in the boost part of the config:
config = {
boost: {
enabled: true,
useGPUTranslations: true,
seriesThreshold: 30
},
}
So I can up that seriesThreshold or just disable boost for this case to solve the problem. Though I would like to know if there's a way to get the boost rendering to correctly show the columns side by side.

Highcharts: Column chart has banding as a result of inconsistent spacing

I've created a column chart which has a mass of data (approximately 300+ entries) and I seem to be getting a visual banding as a result of the data being incorrectly spaced.
I've tried the following plotOptions setting:
plotOptions: {
column: {
pointInterval: 0,
pointPadding: 0,
pointPlacement: 'between',
pointRange: 0,
groupPadding: 0
}
}
Reading the API, I was under the impression pointPadding being set to 0 would resolve the issue however I am still seeing that very slight padding on every 7th data point.
Depending on your screen size, you can see the issue here in my fiddle: http://jsfiddle.net/neilff/WcLSg/4/
Is there a way to explicitly state how far each column should be spaced?

Yes, you have set pointPadding, but then you have set pointWidth which will overwrite pointPadding. Simply disable pointWidth, see: http://jsfiddle.net/WcLSg/5/

Plotting time series with different scales with Hichcharts

I want to represent two time series with Highcharts. My problem is that one has large values and the other one low values. When I plot them together, the one with low values appear as a straight line. I want to be able to plot them with two different scales, but find it impossible to do it. I put what I already have here on a jsfiddle, and the code is here:
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [1000,2000,3000,4000]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,0.2,0.3,0.4,0.5]
},
],
legend: {
enabled:true,
},
})
});
I would appreciate if someone could point me how I could give a different scale to each time series - ideally, I will want to plot more than two, each of them having its own scale.

You can use to yAxis, like in the example
yAxis:[{
},{
opposite:true
}],
http://jsfiddle.net/S2uyp/1/

As the difference between high values and low values is very high so the chart is looking like this but if you try with the following values then you will see that the chart looks good
$(function() {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1,
inputEnabled: $('#container').width() > 300,
enabled:1
},
chart:{type:'line'},
series: [
{name: 'serie with high values',
color: 'red',
data: [10,15,30,40]
},
{name: 'serie with low values',
color: 'green',
data: [0.1,1,5,10]
}],
legend: {
enabled:true
}
})
});

this is exactly what you want I guess.

Since you have an answer telling you how to accomplish specifically what you asked, let me add one that addresses the issue more fundamentally.
This is a classic example of when what you really need is two separate charts (generally, aligned vertically one above the other works best for line charts, where they can work with a common time axis).
That's a concept that seems to shock some people, but it really is the best solution, and there really is no negative aspect to having two charts instead of one.
The problem with plotting 2 series on one chart, with 2 different scales, is that it practically forces the user to make comparisons that are not real. When you plot 2 lines on a chart, the interaction of those 2 lines is generally something of importance, and will be seen as such by the viewer.
When the 2 lines have 2 different scales, the interaction is completely meaningless, and the two lines serve only to clutter the chart and obscure the message of the data.
Essentially, when you plot 2 series with 2 separate scales, you are making 2 charts already anyway - but you're scrunching them into one space where they get in each others way.
FWIW
{{UPDATE:
As an example, here is a fairly typical example of 2 series plotted on separate scales on the same chart:
http://jsfiddle.net/jlbriggs/GYbRY/
It could be cleaned up and improved a bit, but overall it's going to be a bit of a mess no matter what you do to it.
Here is the same data plotted on 2 separate charts, in significantly less space than the original:
http://jsfiddle.net/jlbriggs/m64Ys/
I feel it's hard to support the argument that the first example makes it easier to compare the variation in the two series.

Highcharts margins before and after data display?

I'm trying to use Area Stacked Highchart, here's an example and jsFiddle demo to play with
Unfortunately the chart itself generates ugly gaps at the beginning and at the end of the x-axis.
This question has been asked all over again, and looks like the answer is "don't use categories for xAxis, remove them and replace with type: 'datetime'. Unfortunately I'm getting categories from back end and I can't do nothing about this. And any other setting like margins, paddings, spacing etc. doesn't seem to work with categories at all.
Does anyone have any clue how to fix that? To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
Need 7 more reputation to post an image, sorry for URL: i.stack.imgur.com/lGxo6.png
In short words: [b]try to remove GAPS from jsFiddles example without deleting categories[/b]. Is it even possible?

You are right, that was asked quite a lot, I should prepare auto response for this.
Then answer is to use datetime axis OR linear axis. You have categories from backend? No problem, just store them in some variable and then edit formatter for labels: http://jsfiddle.net/h7Akd/1/
var categories = ['1750', '1800', '1850', '1900', '1950', '1999', '2050'];
...
xAxis: {
tickmarkPlacement: 'on',
title: {
enabled: false
},
tiickInterval: 1, //force to display categories one by one
labels: {
formatter: function(){
return categories[this.value];
}
}
},
Now you can edit min and max, using or xAxis.min/max or 'xAxis.minPadding/maxPadding`.
Extras:
To be honest it looks more like a serious UI / UX bug to me than something that is supposed to happen. Who needs a chart that starts somewhere else than on its edge?! :)
You will be surprised..
For example use columns and you will see. Rather the question is why can't you update backend to return timestamps (as for dates should be)?

Using Highcharts, I want to overlay a line showing the optimal value for a bar

I am trying to overlay 2 diagonal lines over top of a negative stacked bar chart. The purpose of these lines is to show where the optimal value for each bar should be.
The chart will always be from -10% to 10% along the x-axis, so the lines do not need to scale smaller if the graph grew. (though that would be nice to know how to do that as well if it's a small addition)
I am relatively new to HighCharts and I can't seem to find out if this is possible or not.

Given that the intersection of the lines are always going to intersect at the same point I made this. What I did was create two additional series that go from -10 to 0 and 10 to 0. You could do this with one series as well but maybe the male/female projection lines are different? Your choice.
Now, since I do not know where the two lines should intersect I had them end at the final category. You can adjust this by giving the two series different end points. The other trick is to fill the 2 projection lines with null for the in-between points and allow the 2 end points to be connected. I also hid the markers, hid the series from the legend, and allowed for different line styles.
Important bits:
{
name: 'line1',
type: 'line',
color: 'black',
dashStyle: 'dot',
connectNulls: true,
showInLegend: false,
marker: {
enabled: false
},
data: [0, null},
...
, 10]}
Since these data series are stacked we need to make sure only those series get stacked otherwise the 2 projected lines get stacked as well. Do this via:
plotOptions: {
bar: {
stacking: 'normal',
//pointWidth: 20
}
},
Note that is only applying stacking to the 'bar' types. Update jsFiddle.