CODEWITHSUNDEEP
javascriptchart.js
LAffair
LAffair

Reputation: 1998

Chart JS add max value to legend

I'm new in Chart JS and I'm trying to add the maximum values for each dataset inside the legend. I've tried using legendCallback :

HTML:

<canvas id="lineChart"></canvas>

Javascript:

var ctx = document.getElementById("lineChart");
    var lineChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: ['1','2','3','4','5','6','7','8','9','10'],
            datasets: [{
                label: "Max",
                backgroundColor: "rgba(235, 70, 70, 0.31)",
                borderColor: "rgba(231, 25, 25, 0.7)",
                pointBorderColor: "rgba(231, 25, 25, 0.7)",
                pointBackgroundColor: "rgba(231, 25, 25, 0.7)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(220,220,220,1)",
                pointBorderWidth: 1,
                data: [31, 74, 6, 39, 20, 85, 7, 80, 35, 70]
            }, {
                label: "Avg",
                backgroundColor: "rgba(255, 255, 111, 0.3)",
                borderColor: "rgba(255, 255, 50, 0.70)",
                pointBorderColor: "rgba(255, 255, 50, 0.70)",
                pointBackgroundColor: "rgba(255, 255, 50, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: [82, 23, 66, 9, 99, 4, 2, 25, 67, 20]
            },
            {
                label: "Min",
                backgroundColor: "rgba(90, 189, 90, 0.3)",
                borderColor: "rgba(50, 173, 50, 0.70)",
                pointBorderColor: "rgba(50, 173, 50, 0.70)",
                pointBackgroundColor: "rgba(50, 173, 50, 0.70)",
                pointHoverBackgroundColor: "#fff",
                pointHoverBorderColor: "rgba(151,187,205,1)",
                pointBorderWidth: 1,
                data: [30, 46, 60, 29, 79, 54, 23, 25, 47, 10]
            }]
        },
        options: {
            legend: {
                display: true,
                position: 'bottom'
            },
            legendCallback: function(chart) {
                return 'a';
            },
            scales: {
                xAxes: [{
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                    }
                }]
            }
        }
    });

but the displayed legend didn't changed. I've searched for some answers and I also tried using: lineChart.generateLegend(); but still no result.

It is possible to add the maximum value for each dataset inside legend? Thanks in advance!

Upvotes: 0

Views: 1803

Answers (1)

jordanwillis
jordanwillis

Reputation: 10705

Yes, it is possible to show the max value for each dataset inside the legend. You can use the legend.labels.generateLabels config property to do this.

This property allows you to define your own function that generates the legend labels. To add the max, we simply iterate through each dataset's data array, find the max, and build it into the label string.

Here is an example configuration. The magic happens when we set the text property in the return.

legend: {
  display: true,
  position: 'bottom',
  labels: {
    generateLabels: function(chart) {
      var data = chart.data;
      return Chart.helpers.isArray(data.datasets) ? data.datasets.map(function(dataset, i) {

        return {
          text: dataset.label + " (Max Value: " + Chart.helpers.max(dataset.data).toLocaleString() + ")",
          fillStyle: (!Chart.helpers.isArray(dataset.backgroundColor) ? dataset.backgroundColor : dataset.backgroundColor[0]),
          hidden: !chart.isDatasetVisible(i),
          lineCap: dataset.borderCapStyle,
          lineDash: dataset.borderDash,
          lineDashOffset: dataset.borderDashOffset,
          lineJoin: dataset.borderJoinStyle,
          lineWidth: dataset.borderWidth,
          strokeStyle: dataset.borderColor,
          pointStyle: dataset.pointStyle,

          // Below is extra data used for toggling the datasets
          datasetIndex: i
        };
      }, this) : [];
    },
  },
},

I also created a codepen to demonstrate this.

Upvotes: 1

Related Questions