Search code examples
chart.js

Legend label is not showing dash point style, it shows a line instead

The legend label is not showing dash point style, instead it shows a line:

image

I tried configuring the legend label but it did not work.

<div>
  <canvas id="myChart"></canvas>
</div>

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

const options = {
  borderWidth: 0,
  plugins: {
    legend: {
      maxWidth: 200,
      labels: {
        usePointStyle: true,
        boxHeight: 10,
        pointStyle: 'dash',
        pointStyleWidth: 100
      }
    }
  },
  scales: {
    y: {
      beginAtZero: true
    }
  }
};

new Chart(ctx, {
  type: "line",
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [
      {
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1,
        borderDash: [4,4]
      }
    ]
  },
  options: options
});

Here is the link to code: https://codepen.io/luaneaquino/pen/JjQWEJG?editors=1010

I expect that the legend label to show a dash style.

Solution

  • I found a solution! it uses generateLabels method and lineDash attribute. Please check line 58 of javascript file from this working example: https://codepen.io/luaneaquino/pen/wvLWmWV