Chartjs-Borderdash options in chart js changes my legend

by

0👍

You need to provide your own Legend Label Configuration by defining legend.labels.generateLabels inside chart options.

In the following code sample, generateLabels creates an array of objects that implement the Legend Item Interface. Each object simply takes its properties from the corresponding dataset but leaves lineDash undefined.

new Chart(document.getElementById('myChartAxis'), {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [
      {
        label: 'WARNINGS',
          data: [0, 2, 3, 2],
          borderDash: [5],
          borderColor: 'rgb(255, 159, 64)',
          backgroundColor: 'rgba(255, 159, 64, 0.2)',
          fill: false
      },
      {
        label: 'ERRORS',
          data: [1, 1, 4, 3],
          borderDash: [2],
          borderColor: 'rgb(255, 99, 132)',
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          fill: false
      }
    ]
  },
  options: {
    legend: {
      labels: {
        generateLabels: chart => chart.data.datasets.map((dataset, i) => ({
          datasetIndex: i,
          text: dataset.label,
          fillStyle: dataset.backgroundColor,
          strokeStyle: dataset.borderColor
        }))        
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="myChartAxis" height="90"></canvas>

Leave a comment