Chart.js legend labels type dash?

Question

[Maksim Drazdou]

Всем привет. Как сделать тип лини в legend labels такой как и линии на основном графике

если у меня основная линия на графике пунктирная то и в legend выводить пунктирную

сейчас у меня выводится сплошная линия

plugins: {
      legend: {
        position: 'top',
        align: 'start',
        labels: {
          usePointStyle: true,
          pointStyle: 'line',
          pointStyleWidth: 20,
          color: '#283d4a',
        },
        generateLabels: function(chart) {
          var data = chart.data;
          if (data.labels.length && data.datasets.length) {
            return data.datasets.map(function(dataset, i) {
              var lineDash = dataset.borderDash && dataset.borderDash.length > 0 ? dataset.borderDash : [];
              return {
                text: dataset.label,
                fillStyle: dataset.borderColor,
                lineDash: lineDash, // Установка стиля линии для метки легенды
                hidden: !chart.isDatasetVisible(i),
                index: i,
              };
            });
          }
          return [];
        },
        onClick: () => {},
      },
    }

dataset у меня вот такой

const datasets = array
            .filter(rawDataset => rawDataset.average)
            .filter(rawDataset => rawDataset.average.data.length > 0)
            .map(rawDataset => {
                return {
                    label: rawDataset.average.label ?? '',
                    data: rawDataset.average.data,
                    type: rawDataset.average.type,
                    tension: 0,
                    borderWidth: 1.5,
                    pointHitRadius: 5,
                    borderColor: rawDataset.borderColor,
                    backgroundColor: rawDataset.backgroundColor,
                    borderDash: [10, 10],
                };
            });

Answer 1

[Maksim Drazdou]

вот ответ

labels: {
                    usePointStyle: true,
                    color: '#283d4a',
                    generateLabels: function (chart) {
                        let data = chart.data;
                        if (data.labels.length && data.datasets.length) {
                            let labels = [];
                            data.datasets.forEach(function (dataset, i) {
                                if (dataset.label) {
                                    const lineDash =
                                        dataset.borderDash && dataset.borderDash.length > 0 ? dataset.borderDash : [];
                                    labels.push({
                                        text: dataset.label,
                                        color: dataset.borderColor,
                                        strokeStyle: dataset.borderColor,
                                        fillStyle: dataset.borderColor,
                                        lineDash: lineDash.length ? [3, 3] : [],
                                        hidden: !chart.isDatasetVisible(i),
                                        index: i,
                                        usePointStyle: true,
                                        pointStyle: 'line',
                                        pointStyleWidth: 40,
                                    });
                                }
                            });
                            return labels;
                        }
                        return null;
                    },
                },