[Solved]-highcharts change series color when data is dynamically inserted-Highcharts

i solved the problem by myself. basically i still manually set the series's color each time when a new set of data is inserted. i did this before i post the question and failed because i didn't set the color attribute within the series.

i wrote a function which returns different color according to the index and i call it each time a new set of data is inserted.

var switchcolor = (cnt) => {
    var colors = ['#058dc7', '#50b432', '#ed561b', '#dddf00', '#24cbe5', '#64e572', '#ff9655', '#fff263', '#6af9c4'];
    return colors[cnt];
}


$(document).ready(function() {
    var colorcnt = 1;
    var options = {
            chart: {
                    renderto: containerspline,
                    type: 'spline',
                },
            title: {
                text: '信息录入统计曲线图'
            },
            credits: {
                enabled: false
            },
            xaxis: {
                title: {
                    text: '时间'
                },
                categories: []
            },
            yaxis: {
                title: {
                    text: '数量'
                }
            },
            series: [{
                name:'',
                data:[]
            },
            ]
    };


// show the default data when the web page is firstly loaded
    $.get("//localhost:5050", (data)=>{
        var series = {
            name:'', 
            data: []
            };
        var xaxis = {
                categories: []
            };
        data.recordset.foreach((item)=>{
            series.data.push(item.count);
            series.name = item.dates;
            options.xaxis.categories.push(item.times);
        })
        options.series[0].data = series.data;
        options.series[0].name = series.name;
        var chart = new highcharts.chart(options); 
    })

// feed the required data into the chart
    $('#query').click(()=>{
        var obj = {
            year: $('#year').val(),
            month: $('#month').val(),
            day: $('#day').val()
        }

        $.post('//localhost:5050',obj, (data)=>{
            options.chart.colorcount++;
            var series = {
            name:'', 
            data: [],
            color: switchcolor(colorcnt++),
            };
            var xaxis = {
                    categories: []
                };
            console.log(data.recordsets);
            data.recordset.foreach((item)=>{
                series.data.push(item.count);
                series.name = item.dates;
                options.xaxis.categories.push(item.times);
            })

            options.series.push(series);

            var chart = new highcharts.chart(options); 
        })
    });

// clear the search history
    $('#clear').click(() => {
        options.series = [{
            name: '',
            data: []
        }]

        var chart = new highcharts.chart(options); 
        colorcnt = 0;
    })
})