Render html for tick

[thraizz]

Hi, I am trying to create a bar graph that has time on the x axis, energy consumption in kWh on the y axis and on the right side average consumption values for 1, 2,3 and 4 persons. The "normal" graph was easy thanks to the docs and examples, it's also cool to configure and style.
However, I am struggling to get the right y-axis to work.
Our design looks like this:

Do you have an idea how I could get this to work? Currently, I have a linear value that returns labels for certain values:

      yScaleConsumptionAverages: {
        grid: {
          borderDash: [2],
          color: "#00a2b2",
        },
        type: "linear",
        ticks: {
          callback: (value) => {
            if (value === 1500) {
              return "1 Person";
            }
            if (value === 2500) {
              return "2 Personen";
            }
            if (value === 3500) {
              return "3 Personen";
            }
            if (value === 4500) {
              return "4 Personen";
            }
          },
        },
        position: "right",
        title: {
          text: "Durchnittsverbrauch",
          display: true,
          align: "start",
        },
      },

How could I return html/icons instead?

[thraizz]

A teammember has figured this out; you can just use the afterDraw to hack your data in there :D
What we're doing is iterating over each (empty) tick and then we add an Image in there:

        {
          afterDraw: (chart) => {
            const ctx = chart.ctx;
            const xAxis = chart.scales["x"];
            const yAxis = chart.scales["yScaleConsumptionAverages"];
            yAxis.ticks.forEach((value, index) => {
              let y = yAxis.getPixelForTick(index);
              const image = new Image();
              image.src =
                "data:image/webp;base64,UklGRqoAAABXRUJQVlA4WAoAAAAQAAAADwAADwAAQUxQSGkAAAABcEjbdh1dhCA8hCIUIQgPoQYdg9QgRRiDIAxCEIJw5pcPQkRMgNZaaS3bgFWAGnpODfbi0btxycm9iyRlrt4GpYD15BWaazTsMah/Nv7W809iMEky2PU3NkyKPNW9ccnJE1s9ekczzQMAVlA4IBoAAAAwAQCdASoQABAAAUAmJaQAA3AA/vlC/HAAAA==";
              for (let i = 0; i <= index && i <= 3; i++) {
                ctx.drawImage(image, xAxis.right + i * 15 + 10, y - 10);
              }
            });
          },
        },