javascript - How to plot area type highchart?

Question

Here is the jsfiddle Code reproduction,

I am using Highcharts to plot an area graph, how do I do the below ?

1. I need to move the y-axis labels to the right
2. Plot Area chart of 3 colors ['#762232', '#EFCA32', '#007788'] with their respective values.

Expected Output

Answer 1

1. Set yAxis.opposite to true.

2. Add two more series and use tickPositioner to show thier last values as labels.

    yAxis: {
        opposite: true,
        showFirstLabel: false,
        showLastLabel: false,
        tickPositioner: function() {
            var prevTickPos = this.tickPositions,
                tickPositions = [prevTickPos[0], prevTickPos[prevTickPos.length - 1]],
                series = this.chart.series;
   
            series.forEach(function(s) {
                tickPositions.push(s.processedYData[s.processedYData.length - 1]);
            });
   
            tickPositions.sort(function(a, b) {
                return a - b;
            });
   
            return tickPositions;
        },
        ...
    }
   

---

Live demo: https://jsfiddle.net/BlackLabel/gk1t6cp2/

API Refernce: https://api.highcharts.com/highcharts/yAxis.opposite