Highcharts Demo

author(s): Torstein Hønsi

by geoffDev

HTML

<script src="https://code.highcharts.com/highcharts.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', {
    chart: {
        type: 'column'
    },
     title: { 
        "text": null 
    },
   	xAxis: {
      startOnTick:true,
      endOnTick:true,
      type: "datetime",
      minTickInterval: 86400000
    },
    
    yAxis: {
        min: 0,
        title:false,
        stackLabels: {
            enabled: false,
            style: {
                fontWeight: 'bold',
                color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
            }
        }
    },
    legend: {
        align: 'right',
        x: -30,
        verticalAlign: 'top',
        y: -10,
        floating: true,
        backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
        borderColor: '#CCC',
        /* borderWidth: 1, */
        shadow: false
    },
    tooltip: {
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
          name: 'Email',
          data: [
              [Date.UTC(2018, 10, 25), 300],
              [Date.UTC(2018, 10, 20), 400],
              [Date.UTC(2018, 11, 05), 180]
          ],
          color: '#D7D7D7'
      }, {
          name: 'Facebook',
          data: [
              [Date.UTC(2018, 10, 25), 350],
              [Date.UTC(2018, 10, 20), 450],
              [Date.UTC(2018, 11, 05), 200]
          ],
          color: '#27BBDB'
      }, {
          name: 'Twitter',
          data: [
              [Date.UTC(2018, 10, 25), 400],
              [Date.UTC(2018, 10, 20), 540],
              [Date.UTC(2018, 11, 05), 310]
          ],
          color: '#27BBDB'
      }, {
          name: 'Whatsapp',
          data: [
              [Date.UTC(2018, 10, 25), 100],
              [Date.UTC(2018, 10, 20), 520],
              [Date.UTC(2018, 11, 05), 370]
          ],
          color: '#0E9BB9'
      }]
});