Highcharts Demo

author(s): Torstein Hønsi

by Arif Khoja

HTML

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


<div id="container" style="min-width: 410px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Monthly Average Temperature'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  legend: {
    itemStyle: {
      cursor: "default"
    }
  },

  xAxis: {
  //  tickInterval: 10,
    categories: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100],
    title: {
      enabled: true,
      text: 'Minutes'
    },
    labels: {
      rotation: 0.1,
      align: 'left',
      step: 10,
      enabled: true
    },
    startOnTick: true,
    showFirstLabel: true,
    endOnTick: true,
    showLastLabel: true,
     style: {
                fontSize: '8px'
            }
  },
  yAxis: {
    min: 0,
    max: 100,
    tickInterval: 10,
    title: {
      text: '% of Total Events'
    },
    labels: {
      formatter: function() {
        return this.value + '%';
      }
    }
  },
  tooltip: {
    crosshairs: false,
    shared: false,

  },
  plotOptions: {
    spline: {
      marker: {
        enabled: false
      }
    }
  },
  series: [{
    name: 'Accidents',
    data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100]
  }, {
    name: 'Excluded',

    data: [4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
  }]
});