score:1

Here's the idea :

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  tooltip: {
    enabled: false
  },
  credits: {
    enabled: false
  },
  title: {
    text: ''
  },
  legend: {
    layout: 'vertical',
    itemStyle: {
      cursor: 'default'
    }
  },
  plotOptions: {
    series: {
      events: {
        legendItemClick: function() {
          return false;
        }
      }
    }
  },
  xAxis: [{
    title: {
      text: ''
    },
    categories: ['95', '58', '53', '48', '43', '38', '33']
  }],
  yAxis: [{
      title: {
        text: 'ER'
      },
      lineWidth: 1,
      gridLineColor: '#FFF',
      plotLines: [{
        value: 3.30,
        dashStyle: 'shortdash',
        width: 2,
        color: '#B593CE'
      }]
    },
    {
      title: {
        text: 'ES'
      },
      lineWidth: 1,
      gridLineColor: '#FFF',
      opposite: true
    },
    {
      title: {
        text: '2nd Y'
      },
      lineWidth: 1,
      gridLineColor: '#FFF'
    }
  ],

  series: [{
    yAxis: 0,
    type: 'spline',
    color: '#00B1F1',
    data: [null, 3.23, 3.5, 4.6, 3.2, 4.6, 5.1]
  }, {
    yAxis: 1,
    type: 'spline',
    color: '#008D90',
    data: [null, 324, 253, 356, 563, 367, 542]
  }, {
    yAxis: 2,
    color: 'red',
    data: [9.8],
    type: 'spline'
  }],

  data: {
    seriesMapping: [{
      x: 0,
      y: 1
    }, {
      x: 0,
      y: 2
    }, {
      x: 0,
      y: 3
    }]
  }
});
#container {
  min-width: 320px;
  height: 400px;
  margin: 0 auto;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>

http://jsfiddle.net/kqfL43g7/


Related Articles