Charts

The charts used on Leaf is Chartist.js and jQuery Vmaps. Please check out both official documentations to use the charts.

Chartist.js example

Create a div element and initialise based on the given class in Javascript as in the example below:

                                                        
<div class="ct-chart-2 ct-golden-section ct-series-c"></div>
                                                        
                                                    
                                                        
if($('.ct-chart-2').length) {
    // Chart 2
    new Chartist.Line('.ct-chart-2', {
        labels: [2002, 2003, 2006, 2008, 2010, 2012, 2014, 2018],
        series: [
        [0, 1, 1.5, 2.5, 3.5, 4, 5, 6]
        ]
    }, {
        low: 0,
        showArea: true,
        plugins: [
        Chartist.plugins.tooltip()
        ]
    });
}
jQuery Vector Maps

Create a div element and based on the elements id or class initialise jQuery Vector Maps in Javascript.

                                                        
<div id="vmap" style="width: 1012px; height: 500px;"></div>
                                                        
                                                    
                                                        
if($('#vmap').length) {
    $('#vmap').vectorMap(
        {
            map: 'world_en',
            backgroundColor: '#ffffff',
            borderColor: '#ffffff',
            borderOpacity: 0,
            borderWidth: 1,
            color: '#e9ecef',
            enableZoom: false,
            hoverColor: '#11AB7C',
            hoverOpacity: null,
            normalizeFunction: 'linear',
            scaleColors: ['#b6d6ff', '#005ace'],
            selectedColor: '#11AB7C',
            selectedRegions: null,
            showTooltip: true,
            onLabelShow: function(event, label, code)
            {
            switch(code) {
                case 'au':
                label.text('Australia: $283.26m');
                break;
                case 'ca':
                label.text('Canada: $277.03m');
                break;
                case 'fr':
                label.text('France: $136.17m');
                break;
                case 'de':
                label.text('Germany: $680.67m');
                break;
                case 'jp':
                label.text('Japan: $1,234.14m');
                break;
                case 'us':
                label.text('United States: $2,000.04m');
                break;
                case 'gb':
                label.text('United Kingdom: $2,830.80m');
                break;
                case 'ru':
                label.text('Russia: $830.80m');
                break;
                case 'cn':
                label.text('China: $830.80t');
                break;
                default:
                label.text('No data');
            }
            }
        });
}