Custom Labels for Y-Axis in scatter plotly js chart

plotly.js
1

Hi All,

I am trying to display custom labels in Y-Axis using ticktext but instead of the custom labels, the range numbers are getting displayed. I can’t use tickVal as the values are dynamically computed.

Example Code:

chartData?.value.push({
x: xAxisValues,
y: data?.map(value => {
return value?.nc === -1 ? null : value?.nc;
}),
type: “scatter”,
name: “NC”,
mode: “markers”,
marker: {
symbol: “square”,
size: 9,
color: “magenta”
},
yaxis: “y2”,
});
chartData?.value.push({
x: xAxisValues,
y: data?.map(value => {
return value?.nae === -1 ? null : value?.nae;
}),
type: “scatter”,
name: “NAE”,
mode: “markers”,
marker: {
symbol: “square”,
size: 9,
color: “yello”
},
yaxis: “y3”,
});

Layout:

yaxis2: {
autorange: false,
fixedrange: true,
autotick: false,
showline: true,
showgrid: false,
automargin: true,
visible: true,
side: “right”,
ticktext: [
“”,
“NC”,
“UNS”,
“MAN”,
“TT”,
“AEL”,
“FF”,
“FD”,
“BK”,
“AM”,
“BATH”,
“AN-OP”,
“ROP”,
“AE-NAE”,
“SEC”,
“AUDIO”
],
showticklabels: true
},
yaxis3: {
range: [minVal, maxVal],
dtick: ((maxVal - minVal) / 4).toString(),
autorange: false,
fixedrange: true,
autotick: false,
showline: true,
showgrid: false,
visible: false,
overlaying: “y2”,
side: “right”
}

Similarly we can have more y axis but all will be overlaying on y2 and so the data should be displayed in alignment with y2 custom labels.

Is there any way we can achieve this in plotly.js?