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.

Wrong order in Chart.js graph with time on the X-Axis

Hello Im trying to plot some data on angularjs using chart.js , but Im getting a weird ordering of my data, which results in a weird chart like this:
This are my options:
vm.options = {
type:'line',
fill: false,
backgroundColor: 'transparent',
scales: {
xAxes: [{
type: 'time',
position: 'bottom'
}]
}
};
I tried ordering the date of my data like this:
vm.data.sort(function(a,b){
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b.time) - new Date(a.time);
});
But the result is the image above. Can anyone help me spot the problem?

Though it is an old post but I am answering so that somebody may get benefit from it!
I have faced similar problem with my ionic3 app. I had a problematic graph with wrong order,though my dataset was in right order (I have used a slider to adjust the value) .The problem was solved by applying a loading controller of ionic framework.
You need to give time to complete the response and render before the final display.
Hope it will help you.

Flot (flot.js) only populated entries in legend

First, I want to apologise for any mistakes in asking the question properly according to the site rules, it's my first time doing it and I tried my best.
So I have the following issue:
Let's say I have that data (consider it - date / value):
I then init a chart with it, the only relevant option to that moment is:
xaxis: { mode: "time" }
and I get the following result:
("Дек" == December)
Now my problem is that there are mid-day hours in the legend which I don't want. I want only days in it. I tried adding this to the xasis:
tickSize: [1, "day"]
but it creates a legend entry for each day of the whole timespan (01.12, 02.12, 03.12 and so on to 06.12) and I want only the days for which I have some data present.

After a while spent in searching in documentation and google I found that there is actually another property for this:
minTickSize: [1, "day"]
That does the trick.

Highcharts Heat map not displaying data yet correctly labelling

Having trouble with Highcharts heat map; trying to somewhat imitate the example large-heatmap with my own data in a slightly different format yet can't manage to get it to draw properly.
Image snip of the problem
Demo here:
https://jsfiddle.net/17jsrxfk/1/
yAxis: {
type: 'datetime',
labels: {
format: '{value:%H:%M}'
},
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
}
As can be seen, the tooltip manages to find and respond to the correct data at that point, and even changes colour; along with the colour axis at the bottom responding correctly.
[1456444800000, 2700600000, 54.18855218855219], etc
The data is in milliseconds, the first value being the date of record (d,m,y) and the second value being a date (m,h,d,m,y) with a dummy Day Month Year of 0,0,1970; the third value being the actual reading.
I'm not sure if this is a problem with Highcharts somewhere, or if I've made a rookie mistake as i am fairly new to Highcharts.
I haven't been able to find any reproductions of this problem elsewhere, and have spent a good few hours trying to find a solution.
Hints and Tips appreciated too!
Thanks

It looks like the problem is connected with the plugin you are loading on the beginning, without this plugin everything works fine, if you will set colsize and rowsize of your columns: jsfiddle.net/17jsrxfk/2 – Grzegorz Blachliński
Thanks to this guy for solving my problem!

JQuery Flot unlocalized time on x-axis

I have a project that uses the flot plotting package and I have everything working except that my x-axis (which is time) displays the time in my localized time but I want it to display unlocalized.
For example: The data being fed to flot has the time 7:45AM (from the server as milliseconds from the Unix Epoch) but the x-axis displays 12:45AM (which makes sense since I'm in MST-700).
I know the data being sent down is correct as I stepped through that code and make sure it was correct. I know that the JavaScript has the correct time as I told it to output the date that it was given and it was correct (correct being it display 7:45AM and not 12:45AM). I'm very confident that my issue has to do with time zones as I set my time zone to -1200 and the data at 7:45AM would show as 20:45PM. Here is my plot configuration:
var plotOptions = {
series: { shadowSize: 0 }, // drawing is faster without shadows
yaxis: { ticks: 5 },
xaxis: { position: "bottom", mix: minX, max: maxX, mode: "time", timeformat: "%y/%m/%d %H:%M:%S"},
yaxes: yAxes
};
Where maxX is the most current time reading from the server in milliseconds since the unix epoch and minX is some number of minutes less than maxX in milliseconds.
I have tried setting timezone to null and that seemed to have no effect as well as timeZoneOffset. The date and times must stay as they are, as in I can't add/subtract some specified timezone to them.
TL;DR How can I get flot to show time without any localization (no timezone)?
Any help would be greatly appreciated :)
Edit 1:
Upon doing some testing dealing with the time library (jquery.flot.time.js) I found that the tickGenerator and tickFormatter functions aren't being called. I put an alert inside both functions that would display the date that it calculated but I never get the alerts.

Have you looked at the API docs?
https://github.com/flot/flot/blob/master/API.md#customizing-the-axes
It seems you should be able to pass in timezone:"MST-700" or similar, depending which library you chose to include for time formatting. A search through the same page for "timezone" should yield even more information.

Not too sure of exactly why this worked but I managed to fix the issue my self. I took out the jquery.flot.time.js file and now the x-axis is displaying correctly.
I have a feeling that the library was disregarding my timezone options.