Highcharts Demo

author(s): Torstein Hønsi

by Stanimir Stoyanov

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
tooltip: {
        shared: true
    },
chart: {
        zoomType: 'xy'
    },
    title: {
        text: 'Sales conversion'
    },
    subtitle: {
        text: 'Sales conversion - 20% (8 New Joinees)',
         useHTML: true,
         align: 'right',
        style: {
            color: '#00bb00',
            fontWeight: 'bold',
           
            'font-size': '15px',
            'padding': '2px',
        }
    },
    xAxis: {
        categories: ['1', '2', '3', '4', '5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
        crosshair: true
    },
    yAxis: [{ // Primary yAxis
        labels: {
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Prospects / Members',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        opposite: true

    }, { // Secondary yAxis
        gridLineWidth: 0,
        title: {
            text: 'Converted %',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} %',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }

    }],
    
    series: [{
        type: 'column',
        name: 'Joinees',
        color: '#f87a00',
        data: [2, 3, 5, 7, 6,2, 3, 5, 7, 6,2, 3, 5, 7,2, 3, 5, 7, 6,2, 3, 5, 7, 6,2, 3, 5, 7,1,5,4],
       yAxis:0
    }, {
        type: 'column',
        name: 'Prospects',
        color: '#6c6764',
        data: [4, 3, 3, 9, 0,4, 3, 3, 9, 0,4, 3, 3, 9, 0,4, 3, 3, 9, 0,4, 3, 3, 9, 0,4, 3, 3, 9, 0,1],
        yAxis: 0,
    },{
        type: 'spline',
        name: 'Percentage',
        data: [90, 2.67, 3, 6.33, 3.33,3, 2.67, 3, 6.33, 3.33,3, 2.67, 3, 6.33, 3.33,3, 2.67, 3, 6.33, 3.33,3, 2.67, 3, 6.33, 3.33,3, 2.67,...