Highcharts Demo for Lucozade Sport App

by Ben Clayton

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  title: {
    align: 'left',
    text: "5-11 March",
    style: {
      color: 'white'
    }
  },
  credits: {
        enabled: false
    },
  chart: {
    backgroundColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 1,
        y2: 1
      }, // up left
      stops: [
        [0, '#1d2c6a'], // green
        [1, '#131c36'] //  green / yellow
      ]
    },
    type: 'column'
  },
  xAxis: {
    labels: {
      style: {
        color: 'white'
      }
    },
    categories: ['5', '6', '7', '8', '9', '10', '11', '12']
  },
  yAxis: {
    title: {
      text: null
    },
    labels: {
      style: {
        color: 'white'
      }
    },
    plotLines: [{
      label: {
        text: 'Avg',
        align: 'right',
        style: {
          color: 'white'
        }
      },
      color: 'white', // Color value
      dashStyle: 'shortdash', // Style of the plot line. Default to solid
      value: 30, // Value of where the line will appear
      width: 2 // Width of the line    
    }]
  },
  plotOptions: {
    series: {
      borderRadius: 10
    },
    column: {
      groupPadding:0,
      pointWidth: 20,
      borderWidth: 0
    }
  },
  legend: {
    itemStyle: {
      color: 'white'
    }
  },
  series: [{
  	name:"Total Steps",
    data: [29.9, 71.5, 106.4, 80.5, 65.3, 65, 85],
    color: {
      linearGradient: {
        x1: 0,
        y1: 1,
        x2: 0,
        y2: 0
      }, // up left
      stops: [
        [0, '#FF4B15'], // green
        [1, '#FF7B0A'] //  green / yellow
      ]
    }
  }, {
  	name:"Steps Sync'd",
    data: [9.9, 30.5, 50.4, 40, 50, 45, 55],
    color: {
      linearGradient: {
        x1: 0,
        y1: 1,
        x2: 0,
        y2: 0
      }, // up left
      stops: [
        [0, '#429321'], // green
        [1, '#B4EC51'] //  green / yellow
      ]
    }
  }]
});