Chartjs xAxes gridline html (html in ticks callback)

Question

I want to use HTML inside xAxes.ticks.callback, but when I do it:

xAxes: [{
  ticks: {
    callback: (tickValue, index, ticks) => {
      let tickValueNew = Math.abs(tickValue) + "%";
      tickValueNew += "<br>\n" + (100 - Math.abs(tickValue));
      return tickValueNew;
    },
  },
}]

It doesn't work it prints <br> on the page, how to change this?

You cant, if you really want this you will have to adjust the code in the lib itself — LeeLenalee, Mar 14 '21 at 00:24
When you already added
for a new line, what is the use \n there? — Masood, Mar 14 '21 at 11:51

score 1 · Answer 1 · answered Mar 14 '21 at 11:40

1

You cannot define HTML but in order to obtain multi-line tick labels, simply let your xAxes.ticks.callback function return an array.

In your case, this could look as follows:

xAxes: [{
  ticks: {
    callback: v => [Math.abs(v) + '%', 100 - Math.abs(v)]
  }
}]

answered Mar 14 '21 at 11:40

uminder

23,831
5
37
72

Nice, but I need to set text color too on second label – Davidos Mar 15 '21 at 22:24
Please take a look at https://stackoverflow.com/a/61974056/2358409. It can easily be adapted in order to obtain multi-line tick labels where each line has its own text style and color. – uminder Mar 16 '21 at 03:41

Chartjs xAxes gridline html (html in ticks callback)

1 Answers1