Ian
Ian

Reputation: 590

Highcharts - Using 'errorbar' type overrides axis interval

I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/

Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?

Upvotes: 2

Views: 186

Answers (1)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):

// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
    axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}

I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:

{
    name: 'Series 1 error bars',
    data: [
        [4,7.26,7.34],
        [12,6.85,7.06],
        [26,6.92,7.12]
    ],                      
    linkedTo: ':previous',
    color: "#013879",
    zIndex: 0,
    whiskerLength: 7,
    type: 'errorbar',
    pointRange: 0
}

Check this JSFiddle link for pointRange in action.

The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.

Upvotes: 2

Related Questions