How to add different labels for both side of a chart on y-axis highcharts

Question

We have a chart with combination of 2 area charts with 1 line chart and the y-axis labels of area chart should be on left side and line chart labels on right side. And here the series values are dynamic. When we are trying the label with opposite property it is taking the same labels for both sides. But for opposite side of the chart we want to have different labels based on the series so how can we achieve this combination of highcharts.

const bitAreaChart = Highcharts.chart('kpiChartcontainer', {
                        chart: {
                            height: '312',
                            borderColor: '#FFFFFF',
                            borderWidth: 1,
                            borderRadius: 8,
                           events: {
                              load(this: any) {
                                this.yAxis[0].setTitle({
                                    text: "Amount (" +currency + ')'
                                })
                                this.yAxis[1].setTitle({
                                    text: "Score"
                                })
                              }
                            },
                        },
                     //   colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           startOnTick: true,
                    endOnTick: true,
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#000000'
                            }
                        },
                        legend: {
                          itemStyle: {
                            color: '#2C3241',
                            'font-family': 'ProximaNova-Semibold',
                            fontSize: '14px',
                            fontWeight: 'normal',
                            'line-height': '16px',
                            width: '100%',
                            "margin-right": '50px'
                          },
                          symbolWidth: 10,
                          symbolHeight: 10
                        },
                         yAxis: [{
                          min: 0,
                          labels: {
                           // align: 'left',
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px',
                              textOverflow: 'none',
                            }
                          }

                        } , {
                          min: 0,
                          linkedTo: 0,
                          opposite: true,
                          labels: {
                         //   align: 'right',
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px',
                              textOverflow: 'none',
                            }
                          }

                        }],

                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },

                        colors: this.kpiMainColorsData,

                        
                        series: this.kpiSeriesDataObj


        }as any);

expected the behaviour of the graph look like this

Answer 1

You can assign line series to the opposite axis by setting the y-axis index or id inside your series:

{
    type: 'line',
    yAxis: 1
    data: [5, 2, 3, 10, 6]
}

Demo: https://jsfiddle.net/BlackLabel/3q9mw8jk/

API: https://api.highcharts.com/highcharts/series.line.yAxis