How to remove and add Plotlines in HighCharts

Question

I have 2 plotlines in highchart. When I select (for zoom & reset) some range before and after the plotline area some cases having plotlines even it's not in the selected range. So decided to remove the plotlines after validating the selected range and plotline dates . When I tried to set it back after the reset button click . It's not working.

Removing:

selection(event) {
if((fDate < mCurrentDate && tDate < mCurrentDate)||(fDate > mCurrentDate && tDate > mCurrentDate)){
                                    this.xAxis[0].removePlotLine('mCurrentDate');
                                }
                                if((pDate < mCurrentDate && pDate < mCurrentDate)||(pDate > mCurrentDate && pDate > mCurrentDate)){
                                    this.xAxis[0].removePlotLine('mSaleDate');
                                }
}

When the reset Button is clicked I want to set the plotlines again .

render() { 
                            id:'mCurrentDate',
                            value: currentDate.getTime(),
                            color: 'pink',
                            width: 4,
                            zIndex: 3},

                        {
                            id:'mSaleDate',
                            value: SaleStartedDate,
                            color: 'Green',
                            width: 4,
                            zIndex: 6})

So the thing is when we do a zoom I need to remove the plotlines if the plotline dates are not in the selected range and when user clicks on the reset zoom button I want to set the plotlines back.

can anyone help me to fix it.

Could you reproduce your case on some online editor that I could work on? — Sebastian Wędzel, Apr 23 '21 at 07:21

score 0 · Answer 1 · answered Apr 23 '21 at 14:54

Use update option to recreate the plot line

Here i use the merge of lodash to merge current option and add your plotlines:

merge(options, {
    xAxis: {
        plotLines: [
            { 
                id:'mCurrentDate',
                value: currentDate.getTime(),
                color: 'pink',
                width: 4,
                zIndex: 3
            },{
                id:'mSaleDate',
                value: SaleStartedDate,
                color: 'Green',
                width: 4,
                zIndex: 6
            }
        ]
    }
});
this.chart.update(options, true);

Update : you don't absolutely need to get all your opions when you call update. You just need to pass an object with the changed options

How to remove and add Plotlines in HighCharts

1 Answers1

Linked