CODEWITHSUNDEEP
javascriptreactjsgraphchart.js
Sulman Azhar
Sulman Azhar

Reputation: 1079

Chart.js dataset options externally with functionality

I am new to Chart.js and I'm using it inside my project. Now, Chart.js provides a really good solution for everything although I am facing a problem where I want to give the dataset filter options externally as well. For example, right now it is in this format:

enter image description here

Upon clicking on any one of these labels it removes them from the chart. I don't want to change this functionality, but I want to give another option with the same functionality externally which will be like this mockup:

enter image description here

I know I can do some calculations before with the dropdown and send in the props, but I want to know if there is some other way inside Chart.js that can help me. I have seen legend options for external use but couldn't understand them.

Upvotes: 0

Views: 1081

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31381

Chart.js has an example for a html legend on their sample page: https://www.chartjs.org/docs/master/samples/legend/html.html

li.onclick = () => {
        const {type} = chart.config;
        if (type === 'pie' || type === 'doughnut') {
          // Pie and doughnut charts only have a single dataset and visibility is per item
          chart.toggleDataVisibility(item.index);
        } else {
          chart.setDatasetVisibility(item.datasetIndex, !chart.isDatasetVisible(item.datasetIndex));
        }
        chart.update();
      };

The chart and item here are argument in the plugin callback so if you are implementing it yourself without use of the plugin you will need to reference your own chart object and manage which index you clicked and then call the setDatasetVisibility or toggleDataVisibility for that index

Upvotes: 1

Related Questions