Demo - Data Labels

by Ashwin Saxena

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
</div>

CSS

body {
    margin: 40px;
}

.wj-flexchart {
    width: 100%;
}

JavaScript

onload = function() {
    var max = [];
    var min = [];

    var chart1 = new wijmo.chart.FlexChart('#chart1', {
        rendering: renderChart,
        rendered: endRenderChart,
        itemsSource: getData(1),
        bindingX: 'country',
        chartType: 'Column',
        series: [{
            binding: 'downloads',
            name: 'Downloads'
        }],
        dataLabel: {
            content: '{value:n0}',
            rendering: renderLabel
        }
    });

    var chart2 = new wijmo.chart.FlexChart('#chart2', {
        rendering: renderChart,
        rendered: endRenderChart,
        itemsSource: getData(0.5),
        bindingX: 'country',
        chartType: 'Column',
        series: [{
            binding: 'downloads',
            name: 'Downloads'
        }],
        dataLabel: {
            content: '{value:n0}',
            rendering: renderLabel
        }
    });

    var chart3 = new wijmo.chart.FlexChart('#chart3', {
        rendering: renderChart,
        rendered: endRenderChart,
        itemsSource: getData(1.5),
        bindingX: 'country',
        chartType: 'Column',
        series: [{
            binding: 'downloads',
            name: 'Downloads'
        }],
        dataLabel: {
            content: '{value:n0}',
            rendering: renderLabel
        }
    });

    function syncMaxCharts() {
        chart1.axisY.max = chart2.axisY.max = chart3.axisY.max = Math.max.apply(null, max);
    }

    function syncMinCharts() {
        chart1.axisY.min = chart2.axisY.min = chart3.axisY.min = Math.min.apply(null, min);
    }

    function renderChart(sender, e) {
    	sender.beginUpdate();
        max.push(sender.axisY.actualMax);
        min.push(sender.axisY.actualMin);
        if (max.length == 3) {
            syncMaxCharts();
        }
        if (min.length == 3) {
            syncMinCharts();
        }
    }
    
    function endRenderChart(sender, e) {
    	sender.endUpdate();
    }

    function renderLabel(sender, e) {
       ...