Highstock compare option

author(s): Gert Vaartjes

by Gert Vaartjes

HTML

<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/highstock.js"></script-->
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

JavaScript

Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 8,
      inputEnabled: true,
      buttons: [{
        type: 'day',
        count: 5,
        text: '5D',
      }, {
        type: 'month',
        count: 1,
        text: '1M',
      }, {
        type: 'month',
        count: 3,
        text: '3M',
      }, {
        type: 'month',
        count: 6,
        text: '6M',
      }, {
        type: 'ytd',
        count: 1,
        text: 'YTD',
      }, {
        type: 'year',
        count: 1,
        text: '1Y',
      }, {
        type: 'year',
        count: 5,
        text: '5Y',
      }, {
        type: 'all',
        text: 'All',
      }],

      buttonTheme: {
        width: 30
      },
      inputStyle: {
        color: '#FFFFFF',
        backgroundColor: '#191919'
      },
      labelStyle: {
        color: '#FFFFFF'
      },
      smoothed: false
    },
    title: {
      text: 'Index Peformance',
      style: {
        color: '#FFFFFF',
        font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
      }
    },
    credits: {
      enabled: false
    },
    chart: {
      backgroundColor: '#191919',
      zoomType: 'x'
    },
    xAxis: {
      labels: {
        style: {
          color: '#FFFFFF',
          fontSize: '12px'
        }
      },
    },
    yAxis: {
      tickInterval: 100,
      min: 0,
      max: 600,
      labels: {
        style: {
          color: '#FFFFFF',
          fontSize: '12px'
        }
      },
      gridLineWidth: 0.3,
    },
    navigator: {
      enabled: false
    },
    scrollbar: {
      barBackgroundColor: 'white',
      barBorderRadius: 7,
      barBorderWidth: 0,
      buttonBackgroundColor: 'white',
      buttonBorderWidth: 0,
      buttonBorderRadius: 7,
      trackBackgroundColor: 'gray',
      trackBorderWidth: 1,
      trackBorderRadius: 8,
      trackBorderColor: '#CCC',
      enabled: false
    },
    /* COMPARE OPTION */
    plotOptions: {
      series: {
        compare: 'value',        
...