Highcharts Demo

author(s): Torstein Hønsi

by Chetan Hanumantha

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="height: 400px; margin: auto; min-width: 310px; max-width: 600px"></div>

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'boxplot'
    },
    title: {
        text: 'Quota Attainment vs. Tenure'
    },
    legend: {
        align: 'right',
        verticalAlign: 'top',
        layout: 'vertical',
        x: 0,
        y: 100
    },
    xAxis: {
        categories: ['1', '2', '3', '4', '5'],
        title: {
            text: 'TENURE'
        }
    },
    yAxis: {
        title: {
            text: 'QUOTA ATTAINMENT'
        }
    },
    series: [{
        name: 'TechForce (You)',
        color: '#a9d8e0',
        data: [
            [26, 45, 68, 70, 88],
            [33, 53, 74, 80, 89],
            [11, 22, 47, 67, 71],
            [44, 62, 76, 87, 95],
            [24, 36, 74, 82, 87]
        ],
        tooltip: {
            headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
    },{
        name: 'Similar Companies',
        color: '#ad8aa2',
        data: [
            [16, 35, 68, 75, 90],
            [23, 33, 54, 70, 82],
            [18, 26, 37, 57, 65],
            [34, 56, 70, 80, 90],
            [21, 46, 70, 80, 92]
        ],
        tooltip: {
            headerFormat: '<em>Experiment No {point.key}</em><br/>'
        }
    }]
});