Making multiple y axis scales in stock chart - Javascript highcharts

Javascript examples for highcharts:Chart Axis

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Axis

Description

Making multiple y axis scales in stock chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div> 
      <script type="text/javascript">
var seriesOptions = [],//from  w ww.  j a v a  2s  . co m
    seriesCounter = 0,
    names = ['MSFT', 'AAPL', 'GOOG'];
function createChart() {
    Highcharts.stockChart('container', {
        rangeSelector: {
            selected: 4
        },
        yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}?F',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        },
        opposite: true,
    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Main Power',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} volts',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        opposite: true,
    }, { // Tertiary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Signal Strength',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true,
    }],
        plotOptions: {
            series: {
                compare: 'percent',
                showInNavigator: true
            }
        },
        tooltip: {
            pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
            valueDecimals: 2,
            split: true
        },
        series: seriesOptions
    });
}
$.each(names, function (i, name) {
    $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?',    function (data) {
        seriesOptions[i] = {
            name: name,
            data: data,
            yAxis: i,
        };
        seriesCounter += 1;
        if (seriesCounter === names.length) {
            createChart();
        }
    });
});

      </script>  
   </body>
</html>

Related Tutorials