Highcharts income HCM

by Kieran Dang

HTML

<script src="https://code.highcharts.com/highcharts.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

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Thu nhập'
        },
        xAxis: {
            categories: [
                'Dưới 3 triệu',
                'Từ 3–5 triệu',
                'Từ 5–8 triệu',
                'Từ 8–15 triệu',
                'Từ 15–30 triệu',
                'Từ 30–50 triệu',
                'Trên 50 triệu'],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Frequency'
            }
        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
            series: {
                shadow: false,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        var pcnt = (this.y / 201) * 100;
                        return Highcharts.numberFormat(pcnt, 1) + '%';
                    }
                }
            }
        },
        series: [{
            name: 'Cá nhân',
            data: [13, 29, 98, 40, 15, 4, 2]
        }, {
            name: 'Hộ gia đình',
            data: [0, 3, 59, 79, 47, 11, 2]
        }]
    });
});