Highcharts Demo

author(s): Torstein Hønsi

by itsjustcarlos

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/maps/modules/map.js"></script>-->
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>

<div id="data6" style="min-width:800pxx; height: 400px; max-width: 1600px; float: left"></div>

JavaScript

$(function () {
    $('#data6').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: '6 Month'
        },
        subtitle: {
            text: 'Source: Zendesk'
        },
        xAxis: {
            categories: [
                'July','August','September','October','November','December','January'            ],
            crosshair: true
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}%',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }, max: 100, min: 0,
            title: {
                text: ' Percent',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }, plotLines: [{
                    value: 57,
                    color: 'green',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'CSAT Avg'
                    }
                }, {
                    value: 94 ,
                    color: 'black',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'QC Avg'
                    }
                }]
        }, { // Secondary yAxis
            min:0, title: {  
                text: 'Tickets', 
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} Tx',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true,
plotLines: [{
                    value: 45,
                    color: 'blue',
                    dashStyle: 'shortdash',
                    width: 2,
                    label: {
                        text: 'Production Avg'
                 ...