Views by device

author(s): Erik Delaquis

by E D

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; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'bar'
  },
  title: {
    text: 'Viewing analytics by device type'
  },
  subtitle: {
    text: 'Click on the legend to switch variables'
  },
  xAxis: {
    categories: ['Mobile phone', 'Computer', 'Tablet', 'TV', 'Game console', 'Unknown'],
    title: {
      text: null
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: '',
      align: 'high'
    },
    labels: {
      overflow: 'justify'
    }
  },
  tooltip: {
    valueSuffix: ''
  },
  plotOptions: {
    bar: {
      dataLabels: {
        enabled: true
      }
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'bottom',
    x: 0,
    y: -150,
    floating: true,
    borderWidth: 1,
    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
    shadow: true
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Views',
    data: [16869, 13692, 3871, 3745, 211, 99]
  }, {
    name: 'Average mins. watch',
    data: [4.2, 6, 5.5, 9.6, 9.3, 7.6]
  }, {
    name: 'Likes',
    data: [66, 29, 17, 1, 2, 7]
  }, {
    name: 'Shares',
    data: [151, 47, 18, 0, 0, 19]
  }]
});