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 several 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) and legend.position (‘in’) for the Google Column Chart.

To assign options to the chart we can use this jQuery snippet that you need to put on the same page your 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 3000+ 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.

By clicking "subscribe" you consent that the information you provide via this form will be securely processed and stored in compliance with EU privacy laws (GDPR).
This  information will be used to send you newsletters as well as pre-populate any forms, should you want to edit your newsletter preferences.
You can always use this link to unsubscribe from the newsletter. You can see our Privacy Policy here.