How to hide section in a Chart.js Pie Chart

chart js hide labels
chartjs pie chart
chart js pie chart tooltip
hide label in bar chart js
javascript pie chart
chart js doughnut border width
chart js doughnut labels
chart js doughnut size

In Chart.js you can hide a section of a chart by clicking on the label on top. picture of a pie chart with hidden section

I want a section of the chart to be hidden on startup. With another type of chart I would use the dataset hidden property, but pie chart sections do not correspond with the datasets. So if you do the same the entire dataset is hidden, not just the needed section.

(Extra information: I use a pie chart with multiple datasets)

The closest I have come to a solution is this code:

for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
  meta = chart.getDatasetMeta(i);
  meta.data[index].hidden = !meta.data[index].hidden;
}

chart.update();

Or I could overwrite the generateLabels function.

Can anyone help me find a better solution?

Thank you

You may see an implementation as a plugin here and below.

// A plugin that hides slices, given their indices, across all datasets.
var hideSlicesPlugin = {
  afterInit: function(chartInstance) {
    // If `hiddenSlices` has been set.
    if (chartInstance.config.data.hiddenSlices !== undefined) {
      // Iterate all datasets.
      for (var i = 0; i < chartInstance.data.datasets.length; ++i) {
        // Iterate all indices of slices to be hidden.
        chartInstance.config.data.hiddenSlices.forEach(function(index) {
          // Hide this slice for this dataset.
          chartInstance.getDatasetMeta(i).data[index].hidden = true;
        });
      }
      chartInstance.update();
    }
  }
};

Chart.pluginService.register(hideSlicesPlugin);

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      data: [15, 1, 1, 1, 45, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }, {
      data: [5, 1, 25, 10, 5, 1],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1
    }],
    // Hide the second (index = 1) and the fourth (index = 3) slice.
    hiddenSlices: [1, 3]
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

How to hide section in a Chart.js Pie Chart, Label that will be displayed text: string, // Fill style of the legend box fillStyle: Color​, // If true, this item represents a hidden dataset. Label will be rendered with a  I have a pie chart report that I previously had set with the legend hidden. Since the 10/6/13 upgrade this option had disappeared and I can't seem to locate a way to hide it again. Anyone know how? This is critical for an Executive level report format.

Update - 17/Nov/2019

Don't do this, at the time I wrote this I was new to ChartJS and Web Development as well and it seems that the solution above already outdated, so I tried to answer with things that works for me. Maybe it's already outdated too, I haven't used ChartJS much since then. I moved to Echarts.


Since @xnakos answer is already outdated, I just wanted to share the same thing can be done easier in the current ChartJS version (2.7.3). Simply set the values to undefined, setting it to other values such as null will leave the legends being seen (or not crossed).

var ctx = document.getElementById("myDoughnut").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ["Red", "Green", "Blue"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, undefined],
      // Set this value to undefined
      backgroundColor: [
        '#f87979',
        '#79f879',
        '#7979f8'
      ],
      borderWidth: 5
    }]
  },
  options: {
    tooltips: {
      mode: null
    },
    plugins: {
      datalabels: {
        borderWidth: 5,
        borderColor: "white",
        borderRadius: 8,
        // color: 0,
        font: {
          weight: "bold"
        },
        backgroundColor: "lightgray"
      }
    }
  }
});
<div id="app">
  <div width="400">
    <canvas id="myDoughnut"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.4.0/dist/chartjs-plugin-datalabels.js"></script>

<!-- Made in 21 Nov 2018 -->
<!-- with ChartJS 2.7.3 -->

Legend · Chart.js documentation, mangolee commented on Jun 19, 2016. However, I need to draw a pie chart. The pie chart has only one dataset,. If you right click on the Pie Chart and choose the Format Data Series you will see that you can choose to explode all the slices (Pie Explosion below). You can also change the angle of the slice. In order to explode only 1 slice, it is as simple as:

After creating the chart, you can retrieve its metadata through .getDatasetMeta(index), change the hidden attribute of the desired slice and update the chart as shown in the following code snippet. When the user clicks on the label of the hidden slice, it will become visible again.

const chart = new Chart(document.getElementById('myChart'), {
  type: 'pie',
  data: {
    labels: ['Red', 'Orange', 'Yellow', 'Green', 'Blue'],
    datasets: [{
      data: [100, 100, 200, 300, 140],
      backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)']
    }]
  },
  options: {
    responsive: true,
    maintainAspectRatio: true,
    title: {
      display: true,
      text: 'Colors - Sample Pie Chart'
    }
  }
});

chart.getDatasetMeta(0).data[4].hidden = true;    
chart.update();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="myChart" height="150"> </canvas>

how to hide the legends and the tooltip of a pie chart? · Issue #14 , Pie chart sizes its slices proportionally, based on the relative values. Sometimes that means that we end up with a chart that has a bunch of small-value slices  Pie and doughnut charts are effectively the same class in Chart.js, but have one different default value - their cutoutPercentage. This equates what percentage of the inner should be cut out. This defaults to 0 for pie charts, and 50 for doughnuts. They are also registered under two aliases in the Chart core. Other than their different default

Hidden one of the labels by default · Issue #2794 · chartjs/Chart.js , To do so visit "Setting up series" section in our Pie chart article. Base chart#. As our test guinea pig, let's use a very basic Pie chart with a Legend:  These sections describe general configuration options that can apply elsewhere in the documentation. Responsive defines responsive chart options that apply to all charts. Device Pixel Ratio defines the ratio between display pixels and rendered pixels. Interactions defines options that reflect how hovering chart elements works.

Hiding Small Pie Slices – amCharts 4 Documentation, visible property allow us to Show or Hide Data Series in Chart. <script type="​text/javascript">; window.onload = function () {; var chart = new CanvasJS. This concept was introduced in Chart.js 1.0 to keep configuration DRY, and allow for changing options globally across chart types, avoiding the need to specify options for each instance, or the default for a particular chart type. Chart.js merges the options object passed to the chart with the global configuration using chart type defaults and scales defaults appropriately.

Pre-hiding Pie Chart Slices – amCharts 4 Documentation, Format on Save. If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting. Step Size. If set, the scale ticks will be enumerated by multiple of stepSize, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm. This example sets up a chart with a y axis that creates ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5.

Comments
  • This doesn't work anymore with Chart.js 2.7.2. Is there an updated version of this plugin? I can't find it's source.
  • This solution works, however all the undefined legends and data become permanently uninteractive and cannot be toggled anymore.
  • 但標籤本身該有的功能就失去了,我期望的是他包含所有的資料,而只是先被點選暫時的不顯示。
  • This breaks the usefulness of the legend to begin with (showing/hiding on click). Not a good solution, at all.