Table of Contents
wpDataCharts callbacks: JavaScript hooks for customizing chart appearance
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.
An 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>
An 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 panning, backgroundColor (#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>
An 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>
An 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>
