Currently, web application contains Highchart spline-chart that's easy enough to convert into area-chart. My question is two-fold:

A. How to update area-chart color with values that are not on y-axis, so in my example 'count' would be on y-axis however color of area chart would be according to 'sentiment'.

B. How can multiple thresholds be set for different ranges of values in 'sentiment' (I'm assuming through if/else statements in Fetch API?)

Many thanks in advance!

Data structure looks like this:

{'count': [14, 25, 23, 10],
 'sentiment': [5, 4, 1, 3],
 'halfhour': ['11-06-2021, 12:00','11-06-2021, 12:30', '11-06-2021, 13:00', '11-06-2021, 13:30']}

JS code:

<script>
    
    $(document).ready(function(){

            lineChartOptions = {
                chart: { renderTo: 'chart-areaid',
                defaultSeriesType: 'spline' // change this to area-chart
                }, 
                title: {
                    text: ''
                },
                xAxis: { type: 'datetime',
                        categories: []

                },
                yAxis: {
                minPadding: 0.2,
                maxPadding: 0.2,
                title: {text: 'Value',
                        margin: 80}
                },
                series: [{
                    name: 'reddit_stream',
                    animation: false,
                    data: []
                }]
            }

        const lineChart = Highcharts.chart('chart-areaid', lineChartOptions)

            setInterval(() => {
                fetch('/reddit_line_data')
                    .then( resp => resp.json())
                    .then(data => { lineChart.update({ xAxis: { categories: data.halfhour}, 
                                                              series: [{ data: data.count}]}, 
                                                              true, false, false)}); }, 1000)
   </script>