Highcharts - sandbox

by Jayson Buquia

HTML

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

<div id="container" style="height: 450px"></div>

JavaScript

var colour1 = '#21DBD8';
var type1 = 'area';

var colour2 = '#FFD417';
var type2 = 'column';


// colour: use hex codes
// Try http://www.colorpicker.com/ to help generate the codes

// chart type: area, areaspline, bar, column, line, pie, scatter or spline












































$(function () {
    let chart = $('#container').highcharts({
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        plotOptions: {
            area: {
                marker: {
                    enabled: false
                }
            },
            line: {
                marker: {
                    enabled: false
                }
            }
        },

        series: [{
            type: type1,
            color: colour1,
            data: [29.9, 31.5, 16.4, 19.2, 34.0, 56.0, 35.6, 48.5, 26.4, 54.1, 45.6, 54.4],
            name: 'Rainfall',
            zIndex: 1
        },
        {
            type: type2,
            color: colour2,
            data: [194.1, 95.6, 54.4, 59.9, 171.5, 206.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
            name: 'Temperature'
        }]
    });
    
    console.log(Highcharts.charts[0]);
});