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:

Please note that using wpDataChart callbacks requires certain level of programming skills and included support refers only to advice.

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).on('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).on('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).on('load',function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[39] = function(obj){
        obj.options.options.scales.y.display = false;
        obj.options.options.scales.x.display = false;
    }
});
</script>

ApexChartsAn example of using hooks for ApexCharts.js

In fourth example we will change colors and  for ApexChart pie chart. You can find available options at ApexCharts.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).on('load',function(){ 
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[40] = function(obj){ 
        obj.options.colors = ['#2E93fA', '#66DA26', '#546E7A', '#E91E63', '#FF9800', '#FFF800','#570A57','#000','#FFE3A9','#FFC3C3','FF5D5D'];
    }
});
</script>