How to make the area chart lines smooth surface from starting to ending in highcharts area chart

Question

We are using area chart to plot the graph. But the area surface lines are not coming as smooth they are looking as straight lines.So how can we achieve the smooth surface area chart.

const bitAreaChart = Highcharts.chart('bitkpicontainer', {
                        chart: {
                            height: '320',
                          
                        },
                        colors: colors,
                        title: {
                            text: ''
                        },
                        subtitle: {
                            text: ''
                        },
                        xAxis: {
                            type: 'datetime',
                            dateTimeLabelFormats: { // don't display the dummy year
                                day: '%b-%y'
                            },
                           
                            minPadding: 0,
                            maxPadding: 0,
                            style: {
                                textOverflow: 'none',
                                color: '#000000'
                            }
                        },
                         yAxis: {
                          min: 0,
                          labels: {
                            useHTML: true,
                            style:{
                              fontSize: '10px',
                              'font-family': 'ProximaNova-Light',
                              color: '#71808C',
                              'line-height': '11px'
                            }
                          },
                          title: {
                            text: "Amount($)",
                          }
                        },
                        tooltip: {
                            formatter: function(this: any) {
                                return this.series.name + " : " + Highcharts.numberFormat((this.y), 2, '.', ',');
                            }
                        },
                        exporting: {
                            buttons: {
                                contextButton: {
                                    enabled: false
                                }
                            }
                        },
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: false,
                                    symbol: 'circle',
                                    radius: 2,
                                    states: {
                                        hover: {
                                            enabled: true
                                        }
                                    }
                                }
                            }
                        },
                        series: [{
                          type: 'area',
                            name: 'Behaviour Value',
                            data: bitData
                        }, {
                          type: 'area',
                            name: 'Influence Value',
                            data: relationshipData
                        }, {
                          type: 'area',
                            name: 'Transaction Value',
                            data: quantumData
                        }
                        // },{
                        //   type: 'line',
                        //   name: 'John',
                        //   data: quantumData
                        // }
                        ]

        }as any);

here we are using area type chart from highcharts from the above code.

but we need are plot like smooth look like below image.

Answer 1

You can simply change the series type from area to areaspline.

Demo: https://jsfiddle.net/BlackLabel/8ob1hm2j/

Reference: https://www.highcharts.com/docs/chart-and-series-types/areaspline-chart