Additional legend item at top

drivingcat · April 19, 2024, 7:21pm

Consider the chart here

I need the legend at the top to show what it means when the graph is “yellow” (which is only sometimes to indicate that the value is “Estimated”). Is there a way to do this?

{
  "type": "bar",
  "data": {
    "labels": [
      "03/24",
      "03/25",
      "03/26"
    ],
    "yAxisID": "A",
    "datasets": [
      {
        "type": "line",
        "label": "Low Temp",
        "borderColor": "rgb(0,0,204)",
        "borderWidth": 2,
        "fill": "false",
        "data": [],
        "yAxisID": "B"
      },
      {
        "type": "line",
        "label": "High Temp",
        "borderColor": "rgb(204,0,0)",
        "borderWidth": 2,
        "fill": "false",
        "data": [],
        "yAxisID": "B"
      },
      {
        "label": "Actual",
        "xAxisID": "C",
        "type": "bar",
        "data": [
          7,
          8,
          19
        ],
        "borderColor": "rgb(255, 255, 255)",
        "borderWidth": 2,
        "backgroundColor": [
          "rgb(0,255,0)",
          "rgb(0,255,0)",
          "rgb(234,214,124)"
        ]
      }
    ]
  },
  "options": {
    "responsive": "true",
    "title": {
      "display": "true",
      "text": "Daily Usage History"
    },
    "legend": {
      "display": "true",
      "reverse": "true"
    },
    "scales": {
      "yAxes": [
        {
          "id": "A",
          "display": "true",
          "type": "linear",
          "scaleLabel": {
            "display": "true",
            "labelString": "Usage(KWH)"
          },
          "ticks": {
            "fontColor": "rgb(0,0,0)",
            "min": 0,
            "max": 100
          },
          "gridLines": {
            "display": "false"
          }
        },
        {
          "id": "B",
          "display": "true",
          "type": "linear",
          "position": "right",
          "scaleLabel": {
            "display": "true",
            "labelString": "Temperature"
          },
          "ticks": {
            "fontColor": "rgb(0,0,0)",
            "min": 0,
            "max": 120
          },
          "gridLines": {
            "display": "false"
          }
        }
      ],
      "xAxes": [
        {
          "id": "C",
          "display": "true",
          "scaleLabel": {
            "display": "true",
            "labelString": "Day"
          }
        }
      ]
    },
    "tooltips": {
      "mode": "index",
      "intersect": "true"
    },
    "plugins": {
      "datalabels": {
        "id": "A",
        "anchor": "center",
        "align": "top",
        "color": "rgb(102, 102, 102)",
        "font": {
          "weight": "bold"
        }
      }
    }
  }
}

ian · April 20, 2024, 8:38pm

Chart.js doesn’t natively support multiple legend items for a single dataset, but we can work around it by splitting the single dataset into multiple datasets, each representing a different color and thus a different legend item.

Here’s an example:

{
  type: 'bar',
  data: {
    labels: ['03/24', '03/25', '03/26'],
    datasets: [
      {
        type: 'line',
        label: 'Low Temp',
        borderColor: 'rgb(0,0,204)',
        borderWidth: 2,
        fill: false,
        data: [],
        yAxisID: 'B',
      },
      {
        type: 'line',
        label: 'High Temp',
        borderColor: 'rgb(204,0,0)',
        borderWidth: 2,
        fill: false,
        data: [],
        yAxisID: 'B',
      },
      {
        label: 'Estimated',
        type: 'bar',
        data: [null, null, 19], // Assuming the last day is 'alert'
        backgroundColor: 'rgb(234,214,124)',
        borderColor: 'rgb(255, 255, 255)',
        borderWidth: 2,
      },
      {
        label: 'Actual',
        type: 'bar',
        data: [7, 8, null], // Assuming the first two days are 'normal'
        backgroundColor: 'rgb(0,255,0)',
        borderColor: 'rgb(255, 255, 255)',
        borderWidth: 2,
      },
    ],
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Daily Usage History',
    },
    legend: {
      display: true,
      reverse: true,
    },
    scales: {
      yAxes: [
        {
          id: 'A',
          type: 'linear',
          scaleLabel: {
            display: true,
            labelString: 'Usage(KWH)',
          },
          ticks: {
            min: 0,
            max: 100,
          },
        },
        {
          id: 'B',
          type: 'linear',
          position: 'right',
          scaleLabel: {
            display: true,
            labelString: 'Temperature',
          },
          ticks: {
            min: 0,
            max: 120,
          },
        },
      ],
      xAxes: [
        {
          stacked: true,
          id: 'C',
          scaleLabel: {
            display: true,
            labelString: 'Day',
          },
        },
      ],
    },
  },
}

Link to chart editor