How to use HTML for labels in react-chartjs?

Question

I have the following code:

const historicDate = ['<span>${day}<br/>${time}</span>', /* many more... */]
<Line
  options={{
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const
      }
    }
  }}
  data={{
    labels: historicDate,
    datasets: [
      {
        label: 'Temperature',
        data: [30, 31, /* many more... */],
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
      }
    ]
  }}
/>

What I want to achieve is to display the historicDate array elements as html, but it is being displayed as a string.

Btw, I'm using:

chart.js: v4.1.1
react-chartjs-2: v5.1.0

try this : `const historicDate = ()=>return ${day}
${time} ` Is that you want? — MOLLY, Dec 23 '22 at 01:54
Hi~ Have you try this post's answer? https://stackoverflow.com/questions/68046847/adding-data-labels-inside-charts-in-reactjs-is-not-working — MOLLY, Dec 23 '22 at 02:15
To be honest, that answer did not answer my question, but it did lead me to the answer I wanted, Thx. — Anthony Luzquiños, Dec 23 '22 at 03:23

score 0 · Accepted Answer · answered Dec 23 '22 at 03:25

To change the behavior of the x axis, I had to use the scales option. As follows:

<Line
  options={{
    responsive: true,
    plugins: {
      legend: {
        position: 'top' as const
      }
    },
    scales: {
      x: {
        ticks: {
          callback: (value, index) => historicDate[index].split(',')
        }
      }
    }
  }}
  data={{
    labels: historicDate,
    datasets: [
      {
        label: 'Temperatura',
        data: historicTemperature,
        borderColor: 'rgb(255, 99, 132)',
        backgroundColor: 'rgba(255, 99, 132, 0.5)'
      }
    ]
  }}
/>

How to use HTML for labels in react-chartjs?

1 Answers1