Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  Highcharts.chart('container', {
    chart: {
      type: 'spline',
      zoomType: 'xy'
    },
    xAxis: {
      categories: [10, 15, 33, 55, 75, 95, 105, 115, 125, 135],

      plotLines: [{
        color: 'gray',
        dashStyle: 'solid',
        width: 5,
        value: 2
      }]
    },
    yAxis: [{
      lineWidth: 1,
      minorTickInterval: 0.1,
      title: {
        text: 'Sales'
      }
    }, {
      lineWidth: 1,
      minorTickInterval: 0.1,
      opposite: true,
      title: {
        text: 'ROI'
      }
    }],
    legend: {
      enabled: false
    },
    series: [{
      name: 'ROI',
      data: [-7.2, -7.6, -8.46, -8.91, -9.22, -9.56, -9.73],
      pointStart: 1,
      lineWidth: 1,
      type: 'line',
      yAxis: 1,
      marker: {
        'symbol': 'circle',
        fillColor: '#7cb5ec'
      }
    }, {
      data: [-7.4, -7.8, -8.52, -8.98, -9.52, -9.87, -9.78],
      name: 'ROI',
      pointStart: 1,
      lineWidth: 0,
      type: 'line',
      yAxis: 1,
      marker: {
        symbol: 'circle',
        fillColor: '#7cb5ec'
      }
    }, {
      name: 'Sales',
      data: [9.2, 9.6, 10.46, 10.91, 11.22, 11.56, 11.73],
      pointStart: 1,
      lineWidth: 0,
      type: 'line',
      marker: {
        symbol: 'circle',
        fillColor: '#f7a35c'
      }
    }, {
      data: [9.4, 9.8, 10.52, 10.98, 11.52, 11.87, 11.78],
      name: 'Sales',
      pointStart: 1,
      lineWidth: 1,
      type: 'line',
      marker: {
        symbol: 'circle',
        fillColor: '#f7a35c'
      }
    }]
  });
});