Polygons in Highcharts

by anikettiwari

HTML

<script src="http://github.highcharts.com/highcharts.js"></script>
<script src="http://github.highcharts.com/highcharts-more.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$('#container').highcharts({
    series: [{
        name: 'Polygons',
        type: 'polygon',
        data: [
            [0, 400], //x1, y1
            [4, 400], //x2, y1
            [4, 600], //y3, x2
            [0, 600], //y4, x2
            null, // allows multiple polygons         
            [6, 100],
            [8, 100],
            [8, 200],
            [6, 200]
        ]
    }, {
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }]

});