Highcharts Demo

author(s): Torstein Hønsi

by glam

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

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

JavaScript

Highcharts.chart('container', {
    title: {
                    text: 'Perpindahan Dari dan Ke Lampung'
                },
                exporting: {
                    buttons: {
                        contextButton: {
                            enabled: false
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                xAxis: {
                    categories: ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],crosshair: true
                },
                yAxis: [{
                        labels: {
                        },
                        title: {
                            text: 'Kumulatif',
                        },
                        opposite: true
                    }, { 
                        title: {
                            text: 'Bulanan',
                            style: {
                                color: '#b42a28'
                            }
                        },
                        labels: {
                            style: {
                                color: '#b42a28'
                            }
                        },
                    }],
               
                series: [{"type":"column","name":"Ke Lampung (Kumulatif)","data":[239628,403953,590860,796262,1001793,1189324,1400269,1599756,1785803,1988715,2181101,null],"color":"#f45b5b"},{"type":"column","name":"Dari Lampung (Kumulatif)","data":[480164,810789,1165406,1547908,1962013,2300631,2719177,3114032,3471789,3856279,4236225,null],"color":"#fc0"},{"type":"spline","name":"Ke Lampung","data":[239628,164325,186907,205402,205531,187531,210945,199487,186047,202912,192386,null],"color":"#f45b5b","marker":{"lineWidth":2,"lineColor":"#f45b5b","fillColor":"white"}},{"type":"spline","name":"Dari...