Please wait...

wpDataCharts callbacks

wpDataTable wpDataCharts callbacksJavascript hooks for customizing the chart look

All wpDataCharts existing on the page are reflected in the global JavaScript object called ‘wpDataCharts‘. If you check this variable in the JS developer console you will see the wpDataCharts as properties of this object:

Every chart exposes a number of options that customize its look and feel. Charts usually support custom options appropriate to that visualization. We introduced a simple method that allows adding options that are available in Google Charts API, Highcharts API and Chart.js API. This method is called:

wpDataChartsCallbacks[chart_id]

Let’s see an example.

Google ChartsAn example of using hooks for Google Charts

In this example we will add backgroundColor (#F7F7F7) an legend.position (‘in’) for Google Column Chart.

To assign options to the chart we can use this jQuery snippet which you need to put on same page where you chart is located:

<script type="text/javascript">
jQuery(window).load(function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[38] = function(obj){ 
        obj.options.backgroundColor = '#F7F7F7'; 
        obj.options.legend = {position:'in'}; 
    }
});
</script>

HighchartsAn example of using hooks for HighCharts

In second example we will add some options for Highcharts Line chart. You can find available options at Highcharts API Reference

For this chart we included Zooming and panningbackgroundColor (#F7F7F7) and tooltip.formatter (add a currency sign $ in tooltip)

To assign options to the chart we can use this jQuery snippet which you need to put on same page where you chart is located:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.chart.backgroundColor = '#F7F7F7';
        obj.options.chart.zoomType = 'x';
        obj.options.chart.panning = true;
        obj.options.chart.panKey = 'shift';
        obj.options.tooltip = {
            formatter: function () {
            var s = '<b>$' + this.y + '</b>';
            return s;
            }
        }
    }
});
</script>

Chart.jsAn example of using hooks for Chart.js

In third example we will remove X and Y Axes and grid for Chart.js column chart. You can find available options at Chart.js API Reference.

To assign options to the chart we can use this jQuery snippet which you need to put on same page where you chart is located:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.options.scales.yAxes[0].display = false;
        obj.options.options.scales.xAxes[0].display = false;
    }
});
</script>

Never miss new features!

Join 2000+ newsletter subscribers

Never miss notifications about new cool features, promotions, giveaways or freebies - subscribe to our newsletter! We send about one mail per month, and do our best to keep our announcements interesting.

We never spam or disclose your address to anyone.