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

Share Improve this question Follow asked Mar 1, 2018 at 15:32 jackennilsjackennils 30311 gold badge33 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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>