Highcharts Demo

author(s): Torstein Hønsi

by KevinABoucher

HTML

<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/modules/exporting.js"></script>

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

<pre id="csv" style="display:none">4/13/2018,16564
4/18/2018,16239
4/25/2018,14127
5/2/2018,14967
5/9/2018,15499</pre>

JavaScript

Highcharts.chart('container', { 
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'spline'
    },
    data: {
        csv: document.getElementById('csv').innerHTML,
        dateFormat: 'mm/dd/YYYY'
    },
    title: {
        text: 'Total Counts',
        style: {
          color: '#000',
          fontSize: '14px',
          fontWeight: 'bold'  
        }
    },
    credits: {
      enabled: false
    },

    xAxis: {
    	type: "datetime",
      title: {
        text: 'Weeks'        
      },
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%b/%e/%Y', this.value);
        }
      }
    },     
    yAxis: {
      title: {
        text: 'Total Counts'
      },
      labels: {
        format: '{value:,.0f}'
      }     
    },
    legend: {
      enabled: true,
      itemStyle: {
        fontSize: '11px',
        fontWeight: 'normal'
        }
    },    
    plotOptions: {
      spline: { 
        dataLabels: {
          enabled: true,
          style: {
            fontSize: '10px',
            fontWeight: 'normal'
          },
          format: '{point.y:.0f}'
        },
        marker: {
          enabled: false
        },
        enableMouseTracking: true
      }
    },
    tooltip:
    {
      headerFormat: '{series.name}<br />',
      pointFormat: 'Total Count for {point.name}: {point.y:.0f}',
      crosshairs: [true]
    },      
    series: [{
      color: '#5b9bd5',
      label: {
        enabled: false
      }
    }]


});