Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
        colors: ['#63cdcc'], //No I18N	
        chart: {
          type: 'spline' //No I18N
        },
        title: {
          text: ''
        },
        xAxis: {
          tickInterval: 24 * 3600 * 1000,
          type: 'datetime',
          plotBands: [{
            from: Date.UTC(2018, 11, 8),
            to: Date.UTC(2018, 11, 10),
            color: 'rgba(68, 170, 213, .2)'
          }],
          plotLines: [{
            color: '#FF0000',
            width: 2,
            value: Date.UTC(2018, 11, 5)
          }, {
            color: '#FFF000',
            width: 2,
            value: Date.UTC(2018, 11, 7)


          }],

        },
        yAxis: {
          title: {
            text: 'OverAll Visits' //No I18N
          },
          labels: {
            formatter: function() {
              return this.value + ''; //No I18N
            }
          }
        },
        tooltip: {
          crosshairs: true,
          shared: true
        },
        plotOptions: {
          spline: {
            marker: {
              radius: 4,
              lineWidth: 1
            }
          },
          series: {
            allowPointSelect: false
          },

        },
        legend: {
          align: 'center', //No I18N
          borderWidth: '1', //No I18N
          borderRadius: '5', //No I18N
          itemWidth: 300,
          useHTML: true,
          labelFormatter: function() {
            return '<div class="txtovflw nwrp tc" style="width:250px" title="' + this.name + '"><span>' + this.name + '</span></div>'
          },
          backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' //No I18N
        },
        credits: {
          enabled: false
        },
        series: [{
            pointStart: Date.UTC(2018, 11, 1),
            pointInterval: 24 * 3600 * 1000,
            name: 'test.html',
            marker: {
              symbol: 'circle' //No I18N
            },
     ...