Jepto KPI Tracker - Cumulative

by Ryan Brackett

HTML

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

JavaScript

Highcharts.setOptions({
	lang: {
  	thousandsSep: ','
  }
})

//var charOptions = {
Highcharts.chart('container', {
  title: {
    text: 'Jepto KPI Tracker - Cumulative'
  },
  credits: {
    enabled: false
  },
  legend: {},
  xAxis: {
    type: 'datetime',
    labels: {
      format: '{value:%b %e}'
    },
  },
  yAxis: {
    title: {
      text: null
    }
  },
  plotOptions: {
    series: {
      label: {
        connectorAllowed: true
      }
    }
  },
  tooltip: {
    crosshairs: false,
    shared: true,
    valuePrefix: '$',
    borderColor: '#651FFF',
  },
  series: [{
      name: 'Actual',
      type: 'area',
      color: '#651FFF',
      fillOpacity: 0.1,
      marker: {
        enabled: false,
         symbol: 'line'
      },
      zIndex: 3,
      data: [{
          x: 1538352000000,
          y: 366
        },
        {
          x: 1538438400000,
          y: 732
        },
        {
          x: 1538524800000,
          y: 1098
        },
        {
          x: 1538611200000,
          y: 1464
        },
        {
          x: 1538697600000,
          y: 1830
        },
        {
          x: 1538784000000,
          y: 2196
        },
        {
          x: 1538870400000,
          y: 2562
        },
        {
          x: 1538956800000,
          y: 2928
        },
        {
          x: 1539043200000,
          y: 3294
        },
        {
          x: 1539129600000,
          y: 3660
        },
        {
          x: 1539216000000,
          y: 4026
        },
        {
          x: 1539302400000,
          y: 4392
        },
        {
          x: 1539388800000,
          y: 4758
        },
        {
          x: 1539475200000,
          y: 5124
        },
        {
          x: 1539561600000,
          y: 5500
        }
      ],
      _symbolIndex: 0
    },
    {
      name: 'Goal',
      type: 'line',
      color: '#66BB6A',
      dashStyle: 'Dot',
      lineWidth: 2,
      marker: {
        enabled: false,
        symbol: 'circle',
       ...