Set a limit / max number for legends

Question

Lets say I have a Donut chart with 5 items in data like this

 const data = { labels: ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple'], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5, 3], backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'], borderWidth: 1, }, ], }

I don't want it to show all the legends as I don't have space or whatever reason

How can I hide the Green and purple in this example?

I mean only from legends not from chart

Answer 1

I see two easy ways, how to approach this (I would prefer the second option):

1. Just delete the label-name(s), from the labels - array, that you don't want to display in the legend

   But you would have to re-order/sort the data and backgroundColor arrays.

   Here a short demo:

    const data = { labels: ['E-commerce', 'Enterprise', 'Grey'], // <-- just remove the unwanted labels datasets: [{ data: [12, 19, 5, 3, 3], // <-- reorder backgroundColor: ['#C07CC3', '#9C3848', '#ADA8B6', '#9DDBAD', '#606EDA'], // <-- reorder borderWidth: 1, }], }; const config = { type: 'doughnut', data: data, options: { maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { usePointStyle: true, }, } }, } }; new Chart( document.getElementById('chart'), config );

    <script src="//cdn.jsdelivr.net/npm/chart.js"></script> <div class="chart" style="height:184px; width:350px;"> <canvas id="chart" ></canvas> </div>

2. Or better still , but needs some coding, you can filter out label-items , you don't want to display, with the function filter . (details can be found in the documentation )

   UPDATED Alternative Version Demo:

   only the Top X labels (limiting the amount of labels) will be shown (current sort order is descending, but changing this would be easy)

    function getLabelsOnlyTopX(num, data, labels){ let selectedLabels = [] //we don't want to alter the order let helperData = [...data]; //sort in descending order helperData.sort( (a,b) => ba); //get top X Values helperData = helperData.slice(0, num); //get index for the data let indexes = data.map( (value, index) => ({value,index}) ).filter(item => helperData.some(n1 => n1 == item.value)) //slecet only labels with the correct index selectedLabels = labels.filter((value, index) => indexes.some( n => n.index == index)) // just be sure that a maximum of num labels are sent return selectedLabels.slice(0, num); } let maxLabelsToShow = 3; let serverData = [12, 19, 3, 5, 3] let labels = ['E-commerce', 'Enterprise', 'Green', 'Grey', 'Purple']; // Calling the newly created function let showOnly = getLabelsOnlyTopX(maxLabelsToShow, serverData, labels); const data = { labels: labels, datasets: [{ data: serverData, backgroundColor: ['#C07CC3', '#9C3848', '#9DDBAD', '#ADA8B6', '#606EDA'], borderWidth: 1, }], }; const config = { type: 'doughnut', data: data, options: { maintainAspectRatio: false, plugins: { legend: { position: 'right', labels: { usePointStyle: true, /* FILTER function */ filter: function(item, chart) { return showOnly.indexOf( item.text) > -1; } }, } }, } }; new Chart( document.getElementById('chart'), config );

    <script src="//cdn.jsdelivr.net/npm/chart.js"></script> <div class="chart" style="height:184px; width:350px;"> <canvas id="chart" ></canvas> </div>