CODEWITHSUNDEEP
javascripthighcharts
Michael Sagalovich
Michael Sagalovich

Reputation: 2549

Setting xAxis.min breaks area display in two-point highcharts

Please have a look at the following fiddle: http://jsfiddle.net/gy3bV/1/.

That's a "shortened" version of a bug I am trying to fix in my project.

The fiddle code is as simple as this (mine is more complicated, but the issue is reflected here):

$(function () {
    var chartOptions = {
        xAxis: {
            categories: ['Jan', 'Feb'],
            min: 0
        },

        series: [{
            type: 'area',
            data: [0, 10],
            name: 'Area'
        }]
    };


    $('#container0').highcharts(chartOptions);
    chartOptions.xAxis.min = 1;
    $('#container1').highcharts(chartOptions);
});

So, when min = 0, it draws a valid chart with the first point at xaxis (0 level) and the second one at the level of 10. When min = 1, I expect it to just hide the first point and to draw the area as if it goes from hidden ('Jan', 0) to visible ('Feb', 10). However, it just draws a horizontal line at the level of 10.

It behaves as expected with >2 points: http://jsfiddle.net/gy3bV/2/

It does not work when I am passing full coordinates as series (data: [['Jan', 0], ['Feb', 10]]): http://jsfiddle.net/gy3bV/3/

I proved that it is not related to first point being 0 - the same results with any other value. It is also not related to using type: 'area' - the same behavior with line.

Ideas? What may I be doing wrong? Could that be a highcharts bug?

Thanks!

Upvotes: 1

Views: 563

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Your first "working" example has:

xAxis: { categories: ['Jan', 'Feb', 'Mar'] }
series: [{ data: [0, 10, 15] }]

While the "broken" example has:

xAxis: { categories: ['Jan', 'Feb'] }
series: [{ data: [['Jan', 0], ['Feb', 10]] }]

The problem arises when you have min: 1, and only two values. That means that the graph only shows a single point, which means the x-axis doesn't have any span at all (it shows from 0.999 to 1.001). Because you are so far zoomed in the graph appears to be completely horizontal, as the other points are "lightyears" away on the x-axis, while having rather similar y-values.

In this JSFiddle you can see what appears to be a rather strange animation of the process. However, if we go slowly, it becomes more clear that the other points are infact there, just far far away. Take note of how the y-axis never changes, so the points have to be moved so far out that the y-axis difference can't be spotted:

You will have to make sure that your x-axis spans more than a single value, for example with min: 1, max: 2 or adding more points. If you want to be true to the values being dates you should consider changing to type: 'datetime'.

Upvotes: 1

Related Questions