Live plot with multiple y axis in highcharts

Question

I have created live line chart with multiple y-axis.On-Click of legends,creating Y- Axis.

here is the demo http://jsfiddle.net/ashwinp/J7LmP/3/

First thing, it is not showing scale values on each Y axis,Just it is showing only title.

Second thing,

I used linkedTo -- > it is inheriting from primary y axis.

here is the demo http://jsfiddle.net/ashwinp/J7LmP/4/

Here, I want each Y axis should have own scaling. it should not inherit scaling from primary y axis.

Y axis should scale depending upon the value of own series.

For Example : Series1 values falls between 1 to 100 sometimes it may go beyond 100 also that time also it should auto scale. Series2 : 200- 500 and series3: 600 to 1000

in this case: Yaxis1 Min will be 1 and max will be 100 and Y axis2 : 200-500 y axis3:600-1000

I used min and max and tick interval but it is auto re-sizing when values goes beyond.Used setextrem but it is workaround solution.

Thanks in advance

$(function () {
    $(document).ready(function () {    
        RawDataChartWithMultiYAxis();
      });
   });

 function addAxes(name, visiblity, index) {    
var chart = $('#container').highcharts();
if (visiblity == "hidden") {
    chart.addAxis({
        id: name,
        title: {
            text: name
        },            
        lineWidth: 2,
        lineColor: '#08F',
        labels: {
            format: '{value} ' + chart.series[index].tooltipOptions.valueSuffix,
            style: {
                color: '#4572A7'
            }
        },
        opposite: false,
        linkedTo:0
    });
   } else {
    chart.get(name).remove();
  }
}

 function RawDataChartWithMultiYAxis() {
    var a = 0;
    new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'line',
        alignTicks: true,
        animation: Highcharts.svg, // don't animate in old IE
        events: {
            load: function () {
                // set up the updating of the chart each second                    
                var series = this.series[0];
                var series1 = this.series[1];
                var series2 = this.series[2];                  
                setInterval(function () {                       
                    var shift = series.data.length > 10;                        
                    var x = a++, // current time                                      
                        y = parseFloat(Math.random());
                    y1 = parseFloat(Math.random() * 100);
                    y2 = parseFloat(Math.random() * 1000);
                    series.addPoint([x, y], true, shift);
                    series1.addPoint([x, y1], true, shift);
                    series2.addPoint([x, y2], true, shift);
                }, 1000);
            }
        }
    }, plotOptions: {
        series: {
            animation: true,
            events: {
                click: function () {
                },
                legendItemClick: function (event) {
                    var visibility = this.visible ? 'visible' : 'hidden';
                    addAxes(this.name, visibility, this.index);
                }
            }
        }
    },
    tooltip: {
        shared: true
    },
    yAxis: {
        title: {
            text: 'X1'
        },
        lineWidth: 2,
        lineColor: '#F33'
    },
    legend: {
        enabled: true
    },
    series: [{
        name: 'X1',
        data: [],
        tooltip: { valueSuffix: " QSU" }
    }, {
        name: 'X2',
        data: [],
        visible: false,
        tooltip: { valueSuffix: " mS/cm" }
    }, {
        name: 'X3',
        data: [],
        visible: false,
        tooltip: { valueSuffix: " Celcius" }
    }]
});
  }

Sebastian Bochan Sebastian Bochan · Accepted Answer · 2014-03-21T11:03:10

Scale is not displayed because any serie is not related with this axis. In other words, to have scale, you need to have linked serie by yAxis

http://api.highcharts.com/highcharts#Series.yAxis

Live plot with multiple y axis in highcharts

2 Answers