[Chartjs]-How can I force my ChartJS canvas legend to stay in a single column?

by

1👍

✅

You can generate custom HTML legend using legendCallback together with some CSS.

legendCallback: chart => {
  let html = '<ul>';
  chart.data.datasets.forEach((ds, i) => {
    html += '<li>' +
      '<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')">&nbsp;</span>' +
      '<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
      ds.label + '</span>' +
      '</li>';
  });
  return html + '</ul>';
},

To make this behave the same as standard Chart.js charts, the function onLegendClicked is invoked when a mouse click occurs on a legend label. This function toggles the hidden state of individual datasets and changes label text style between normal and strike-through.

function onLegendClicked(e, i) {
  const hidden = !chart.data.datasets[i].hidden;
  chart.data.datasets[i].hidden = hidden;
  const legendLabelSpan = document.getElementById("legend-label-" + i);
  legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
  chart.update();
};

Please take a look at your amended code and see how it works.

const lineChartColors = ["#000000", "#fd7730", "#ffd35c", "#3fc6f3", "#28a745", "#488cf2", "#4755d3", "#9768c9", "#f2748d", "#f287e7", '#992499', '#6BD69E'];
const legendlabels = ['Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
const datapoints = [
  [205, 275, 359, 329, 262, 302, 290, 323, 279, 238, 307, 245],
  [16, 13, 14, 11, 23, 11, 24, 23, 15, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 53, 0],
  [169, 194, 261, 193, 151, 158, 128, 143, 163, 173, 139, 208],
  [8, 5, 8, 2, 4, 4, 0, 0, 0, 0, 0, 0],
  [0, 0, 19, 36, 7, 35, 27, 30, 13, 0, 0, 0],
  [0, 47, 30, 54, 59, 48, 41, 38, 65, 24, 44, 37],
  [12, 16, 27, 33, 18, 46, 70, 89, 23, 41, 71, 0]
];
var suppliers = ["Total", "Starkey", "Resound", "Widex", "Rexton", "Unitron", "Phonak", "Signia"];

function onLegendClicked(e, i) {
  const hidden = !chart.data.datasets[i].hidden;
  chart.data.datasets[i].hidden = hidden;
  const legendLabelSpan = document.getElementById("legend-label-" + i);
  legendLabelSpan.style.textDecoration = hidden ? 'line-through' : '';
  chart.update();
};

const chart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: legendlabels,
    datasets: datapoints.map((e, i) => ({
      backgroundColor: lineChartColors[i],
      borderColor: lineChartColors[i],
      fill: false,
      data: e,
      label: suppliers[i],
      lineTension: 0.2,
    }))
  },
  options: {
    legend: {
      display: false
    },
    legendCallback: chart => {
      let html = '<ul>';
      chart.data.datasets.forEach((ds, i) => {
        html += '<li>' +
          '<span style="width: 36px; height: 14px; background-color:' + ds.backgroundColor + '; border:' + ds.borderWidth + 'px solid ' + ds.borderColor + '" onclick="onLegendClicked(event, \'' + i + '\')">&nbsp;</span>' +
          '<span id="legend-label-' + i + '" onclick="onLegendClicked(event, \'' + i + '\')">' +
          ds.label + '</span>' +
          '</li>';
      });
      return html + '</ul>';
    },
    scales: {
      xAxes: [{
        scaleLabel: {
          display: true,
          labelString: 'Month'
        }
      }],
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        scaleLabel: {
          display: true,
          labelString: "Units Sold"
        }
      }]
    },
    plugins: {
      datalabels: {
        display: false
      }
    }
  }
});
document.getElementById("legend").innerHTML = chart.generateLegend();
#chart-wrapper {
  display: flex;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#legend li {
  cursor: pointer;
  display: flex;
  padding: 0 10px 5px 0;
}

#legend li span {
  padding-left: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div id="chart-wrapper">
  <div id="legend"></div>
  <canvas id="myChart" height="75"></canvas>
</div>

Leave a comment