Video metrics

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: ['Rec: phim truyện', 'Yêu thích'],
            crosshair: true
        },
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value} lượt',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[2]
                }
            },
            opposite: true

        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: '',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} %',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            }

        }],
        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 == "CTR") {
                        return Highcharts.numberFormat(this.y, 1) + '%';
                      } else {
                      return this.y;
                      }
                        
                    }
                }
            }
        },
        series: [{
            name: 'CTR',
            data: [23, 39],
            yAxis: 1,
            tooltip: {
                valueSuffix: '%'
            }
 ...