Highchart background based on percentage

Question

I am trying this design from 2 days using the highchart in the angular ionic I cant able to understand why I am not getting color I can able to get the value values comes based on the endpoint I need same as the below design attached using high charts nothing is displaying except value is there any alternative or can we achieve it in the high charts as well

this.moistureGraphOptions = {
            chart: {
                events: {
                    load: function () {
                        var chart = this,
                            xAxis = chart.xAxis[0],
                            plotLines = xAxis.plotLinesAndBands,
                            newOptions,
                            coordinates = [];

                        plotLines.forEach(function (plot, index) {
                            if (plot.id === 'gradient-plot-line') {
                                var plotLine = plot,
                                    path = plot.svgElem.d.split(' ');

                                coordinates = [
                                    +path[1],
                                    +path[2],
                                    +path[4],
                                    +path[5]
                                ];

                                newOptions = plotLine.options;
                                newOptions.color = {
                                    linearGradient: [0, 0, 0, coordinates[1] + 247],
                                    stops: [
                                        [0, '#F7A35C'],
                                        [1, '#7ACCC8']
                                    ]
                                };
                            }
                            xAxis.removePlotLine('gradient-plot-line');
                        });
                        xAxis.addPlotLine(newOptions);
                    }
                }
            },
            title: {
                text: null
            },
            xAxis: {
                categories: [],
                labels: {
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Helvetica-light'
                    }
                },
                plotLines: [{
                    id: 'gradient-plot-line',
                    width: 400,
                    value: 5.5
                }]
            },
            yAxis: [
                {
                    title: {
                        text: 'Value',
                    },
                },
            ],
            credits: { enabled: false },
            legend: {
                layout: 'horizontal',
                align: 'center',
                verticalAlign: 'bottom',
            },
            series: [
                {
                    name: 'Values',
                    yAxis: 0,
                    data: [],
                    color: '#d03c3f'
                }
            ],
            exporting: {
                enabled: false
            },
        };

Highcharts image

Answer 1

You can use yAxis.plotBands instead of the custom code in the load event.

    yAxis: [{
        reversed: true,
        title: {
            text: 'Value',
        },
        plotBands: [...]
    }]

---

Live demo: http://jsfiddle.net/BlackLabel/qdwp843m/

API Reference: https://api.highcharts.com/highcharts/yAxis.plotBands