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): /

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?

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

• javascript
• wordpress
• chart.js

3 Answers 3

This is taken from the ChartJS GitHub.

You set the new value and then use the ChartJS API to update the chart to hide the ones you have toggled off. If you wanted to toggle them again you just do the reverse.

//Hide
chart.getDatasetMeta(1).hidden=true;
chart.update();

//Show
chart.getDatasetMeta(1).hidden=false;
chart.update();

Here's an example in JSFiddle.

you just need to add hidden:true to your datasets

{
  label: "something",
  backgroundColor: 'green',
  data: data,
  hidden: true
}

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>