如果序列值不相似，则在Highcharts上自动分割y轴

Question

I have a page that allows people to select values to graph from a set of values and sometimes those will be very different, eg 1-10 for series A and 1000-1200 in series B.

Right now, that would make series A very difficult to read, but this could be solved by putting it in a different y-axis.

Has anyone done this with Highcharts before / know of a nice way to handle it?

I thought I had seen a plugin for this before (that I can't find now).

The alternative will be to find the minimum and maximum for each line and split them up manually.

Answer 1

How about using just two separate yAxes? Just like this: http://jsfiddle.net/p8f8ko6z/

$('#container').highcharts({
    xAxis: [{
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    }],
    yAxis: [{ // Primary yAxis

    }, { // Secondary yAxis
        opposite: true
    }],
    series: [{
        yAxis: 1,
        data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

    }, {
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
});

So no matter what data you have, always use two separate axes. You can add specific color and title to show which series is connected to which axis.

Answer 2

In the series options when you build the chart you can specify a secondary yaxis:

Series: {
  yAxis: 1
}

series.area.yAxis

You can also separate the yAxis from each other:

Two panes, candlestick and volume