multipe y axis for same dataset

I’m trying to get ticks on both the right an left of the chart that use the same data sets. A simple example would be time on the x axis, miles on the left and km on the right. but more specifically I’m working on a experience graph for an rpg like so like so

the left is actually experience earned by the character and the right is level. I’ve achived this with

    ticks: {
        min: 0,
        max: 300000, // set dynamically to equal the left y-axis (max experience)
        stepSize: 1,
        callback: function (value, index, values) {
        const lvlIndex = lvlXP.indexOf(value);
        if (lvlIndex !== -1) {
            return 'lvl ' + (lvlIndex + 2);
        }
   }

but considering that the experience could be as high as 500,000 this requires that callback is called up to 500k times and runs incredibly slowly

Is there an efficient was to handle this? I’ve looked at the documentation but havn’t ben able to find anything relevant to this

[kurkle]

Something like this: https://codepen.io/kurkle/pen/GRgBgWL?editors=0010

[giancarlocp]

Yes, it is possible. I was missing to set yAxes array properly. And for custom axis legend color, we need ticks: { fontColor:… }

yAxes: [{
  type: "linear",
  display: true,
  id: "y-axis-1", // default position -> left
  ticks: { fontColor: "#F57" }, // this here
},{
  type: "linear",
  display: true,
  id: "y-axis-2",
  position: "right",
  ticks: { fontColor: "#3AE" }, // this here
  gridLines: { drawOnChartArea:false } // only want the grid lines for one axis to show up
}],