By default chart engine’s behavior, column chart cannot be inverted, so X axis becomes Y axis and vice versa. That’s where wpDataCharts Callbacks come in again. Every chart exposes several options that customize its look and feel. Charts usually support custom options appropriate to that visualization. You can use it for adding options that are available in Highcharts API.

In this example, we look at Global Smartphone Shipments (in millions of units) since Q3 2018, until Q3 2019. Initially, the chart would come up like this:

To make the chart display the bars horizontally, you need to enter the following callback in HTML format above the chart’s shortcode, like this:
 

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; } 
    wpDataChartsCallbacks[95] = function(obj) { 
        obj.options.type = 'horizontalBar';
    };
});
</script>

For a chart that has this many bars, it’s recommended to change the default chart’s height in the creation wizard. So with the height set to 800px, and the callback seen above applied, the chart finally looks like this:

Was this answer helpful ? Yes (0) No (0)

Comments are closed.

Do you have the best

essential plugins installed?

Grab the best 46 plugins. Tested and sorted.

Plugins for SEO, Caching, Security, Design and UX, Stats & analytics, Social sharing. Only the best ones.

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).

Thank you for subscribing! Please check your inbox to download the WordPress goodies.