Chartjs-In which stage of the program do I remove my legend labels in charts.js?

by

0👍

✅

As I mentioned in my comment, your legend.labels.filter function looks fine and it is triggered each time the chart is created or updated.

There are however other problems in your code, Every option element for example has the same value. Therefore, each chart will look the same since myData either does not change.

Nevertheless, please take a look at your amended code and see how it could work.

let let_25 = [28, 35, 40, 45, 50, 55, 62, 66, 70, 78];
let let_50 = [28, 35, 40, 45, 50, 55, 62, 66, 70, 78];
let let_10_90 = [40, 65, 63, 64, 72, 79, 83, 87, 100, 108];
let let_med = [30, 40, 45, 50, 56, 60, 66, 73, 78, 85];
let let_25_75 = [35, 50, 51, 55, 63, 69, 73, 80, 85, 94];
let let_10 = [25, 30, 36, 39, 45, 49, 53, 56, 60, 68];

let myData = {
  labels: ["1", "2", "3", "4", "5", "6", "7", "8", "9+"],
  datasets: [{
      label: "25th Percentile",
      fill: false,
      backgroundColor: 'rgb(190, 99, 255, 0.25)',
      borderColor: 'rgb(190, 99, 255)',
      data: let_25,
    }, {
      label: "10th Percentile",
      fill: false,
      backgroundColor: 'rgb(190, 99, 255, 0.25)',
      borderColor: 'rgb(190, 99, 255)',
      data: let_10,
    }, {
      label: "25th - 75th Percentile",
      fill: false,
      backgroundColor: 'rgb(190, 99, 255, 0.25)',
      borderColor: 'rgb(190, 99, 255)',
      data: let_25_75,
    }, {
      label: "10th - 90th Percentile",
      fill: false,
      backgroundColor: 'rgb(190, 99, 255, 0.25)',
      borderColor: 'rgb(190, 99, 255)',
      data: let_10_90,
    },
    {
      label: "Median",
      fill: false,
      backgroundColor: 'rgba(255, 99, 132, 0.25)',
      borderColor: 'rgb(255, 99, 132)',
      data: let_med,
    }
  ]
};

var myChart;
function updateChartType() {
  if (myChart) {
    myChart.destroy();
  }
  myChart = new Chart('myChart', {
    type: document.getElementById("chartType").value,
    data: myData,
    options: {
      legend: {
        labels: {
          filter: item => !['25th Percentile', '10th - 90th Percentile'].includes(item.text)
        }
      }
    }
  })
};

updateChartType();
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<h5 class="label">Chart Type</h5>
<select name="chartType" id="chartType" onchange="updateChartType()">
  <option value="line">Backend Engineer</option>
  <option value="line">Frontend Engineer</option>
  <option value="line">Fullstack Engineer</option>
  <option value="line">Mobile Engineer</option>
  <option value="line">Doughnut</option>
</select>
</div>
<div class="chart-container" style="position: relative; width:85vw">
  <canvas id="myChart"></canvas>
</div>

0👍

whats item in the filter func? Is it not an instance of the data?

In which case shouldn’t it be label and not text

return !item.label.includes("25th Percentile");

Leave a comment