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/exporting.js"></script>

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

CSS

@import 'https://code.highcharts.com/css/highcharts.css';

#container {
	height: 400px;
	max-width: 800px;
	margin: 0 auto;
}

/* Link the series colors to axis colors */
.highcharts-color-0 {
	fill: #7cb5ec;
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 text {
	fill: #7cb5ec;
}
.highcharts-color-1 {
	fill: #90ed7d;
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 text {
	fill: #90ed7d;
}


.highcharts-yaxis .highcharts-axis-line {
	stroke-width: 2px;
}

JavaScript

Highcharts.chart('container', {

    chart: {
        type: 'pie',
        /* styledMode: true */
    },

    title: {
        text: 'Total Kunjungan Dari dan Ke Lampung'
    },

    yAxis: [{
        visible: false
    }, 
    {
        visible: false
    }
    ],

    plotOptions: {
        column: {
            borderRadius: 5,
            colorByPoint: true
        },
        series: {
            dataLabels: {
                enabled: true,
                formatter:function() {
                    return this.point.y.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
                }
            }
        }
    },
    colors: [
        '#ff0000',
        '#00ff00',
        '#0000ff'
    ],
/*     series: [{data: [20, 43]}], */

     series: [{
        name: 'Dari Lampung',
        data: [{y: 15652437}],
        yAxis: 0,
        color: '#fc0'
    }, {
            name: 'Ke Lampung',
        data: [{y: 13933207}],
        yAxis: 1,
        color: '#b42a28'
    }], 
    credits: {
      enabled: false
    }

});