Video metrics (same metric)

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: 'Video metrics'
        },
        xAxis: {
            categories: ['Phim truyện'],
            crosshair: true
        },
        yAxis: { // Primary yAxis
            labels: {
                format: '{value} phim',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },

        },
        tooltip: {
            shared: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            },
            series: {
                shadow: false,
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                    console.log(this);
                    	if(this.series.name == "GR") {
                        return Highcharts.numberFormat(this.y, 1) + '%';
                      } else {
                      return this.y;
                      }
                        
                    }
                }
            }
        },
        series: [{
            name: 'DV',
            data: [36],
            tooltip: {
                valueSuffix: 'phim'
            }
        }, {
            name: 'UV',
            data: [130],
            tooltip: {
                valueSuffix: ' phim'
            }
        }]
    });
});