hide dataset by default using Chart.js and a custom script

I’m using wpDataTables plugin on my WordPress website to draw some tables and charts. The charts are rendered using Chart.js. The developers of the plugin created a custom script to control some more aspects of Chart.js than the plugin can handle out of the box.

That’s the script:

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

In this example it hides the axes of the chart with the ID 39. I need to change the above script to hide a specific dataset (line in the chart) by default. My chart ID is 2 and I want to hide the dataset labelled “SPM”.

You can take a look at the table and chart how it currently looks like here (it’s a weapon overview of a game, so please do not wonder): https://mydivision.net/the-division-waffen/

The first chart has all datasets visible by default: I want it to look like this by default (“SPM” line hidden):

Can anyone please assist how to do that?

Answer

The solution is:

<script type="text/javascript">
jQuery(window).load(function(){
    if( typeof wpDataChartsCallbacks == 'undefined' ){ wpDataChartsCallbacks = {}; }
    wpDataChartsCallbacks[2] = function(obj){
        obj.options.data.datasets[5].hidden = true;
    }
});
</script>

Advertisement

Answer