ONA 16 Board - Website - Device

by Adam Nekola

HTML

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

<div id="container" style="width: 500px; height: 350px; margin: 0 auto"></div>

JavaScript

$(function () {

    Highcharts.setOptions({
        lang: {
            thousandsSep: ","
        }
    });
    
    Highcharts.chart('container', {
        title: {
            text: 'Traffic by Device',
            align: 'left',
            style: {
            	fontWeight: 800,
              fontSize: "2em"
            }
        },
        series: [{
            name: 'Desktop',
            data: [92.59, 89.13, 82.82, 81.20, 79.59, 79.63]
        },{
            name: 'Mobile',
            data: [7.27, 7.03, 11.94, 14.26, 17.11, 18.06],
            dataLabels: {
            	color: '#fff'
            }
        },{
            name: 'Tablet',
            data: [0.14, 3.84, 5.24, 4.54, 3.3, 2.31],
            marker: {
            	enabled: false
            }
        }],
        xAxis: {
            categories: [
                '2011',
                '2012',
                '2013',
                '2014',
                '2015',
                '2016'
            ],
        		tickLength: 0,
            lineColor: "#eeeeee"
        },
        yAxis: {
            min: 0,
            max: 100,
            endOnTick: false,
            title: {
              text: '% of Traffic',
            	align: "low"
            }
        },
        chart: {
            type: 'area',
            style: {
            	fontFamily: "\"Source Sans Pro\", Verdana, Arial, Helvetica, sans-serif"
            }
        },
        plotOptions: {
        		area:{
            	stacking: "normal",
              lineWidth: 0
            },
            column: {
                pointPadding: 0,
                borderWidth: 0
            },
            series: {
              dataLabels: {
                  enabled: true,
                  rotation: -60,
                  color: '#213563',
                  align: 'right',
                  format: '{point.y:,.1f}', // one decimal
                  y: 10, // 10 pixels down from the top
                  x: -4,
                  style: {
...