Suppose I add some vertical lines labeling with different names. Now I want to delete any line by clicking on the line. How do I do that...someone please help. Thanks in advance.

Suppose I add some vertical lines labeling with different names. Now I want to delete any line by clicking on the line. How do I do that...someone please help. Thanks in advance.

• javascript
• highcharts

Share Improve this question Follow edited Feb 16, 2014 at 7:20 Poles asked Feb 16, 2014 at 7:10 PolesPoles 3,6821010 gold badges4646 silver badges9696 bronze badges 5

• Have you tried repotting the graph on click and changing the setting to without the plot line? – sesmic Commented Feb 16, 2014 at 7:13
• Sorry, I didn't understand your point. Can you elaborate a little bit? – Poles Commented Feb 16, 2014 at 7:19
• You want to delete the label that corresponds to the line you click on too, right? – Blundering Philosopher Commented Feb 16, 2014 at 8:23
• Sorry, I think I misread the question. You want to remove a series of data when you click on it, right? How many series will you have in one chart? – Blundering Philosopher Commented Feb 16, 2014 at 8:41
• yeah thats right...no. of series will be as many as I add. First of all, lets take only one vertical plotline: jsfiddle/jugal/RWCua Now delete the line(My Marker). – Poles Commented Feb 16, 2014 at 8:50

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Here is what you can do to click a plotLine and have it instantly removed:

In the xAxis config, add a plotLine with a click event:

xAxis: {
    plotLines: [{ // mark the weekend
        id: 'plotLine1',
        color: 'red',
        width: 2,
        value: Date.UTC(2010, 0, 4),
        events: {
            click: function(e) {
                this.axis.removePlotLine(this.id)
            }
        }
    }],
    tickInterval: 24 * 3600 * 1000,
    // one day
    type: 'datetime'
},

Here is a fiddle to show it work: Click Here

To get rid of the grid lines, you can just color them transparent inside the yAxis config:

yAxis: {
    ...
    gridLineColor: 'transparent',
}

Edit for new Question: To remove the lines in this example, you can just add the event config to the new plotLines - like this:

// Inside chart event click function:
    chart.addPlotLine({
        value: event.xAxis[0].value,
        color: '#'+(Math.random()*0xEEEEEE<<0).toString(16),
        width: 2,

        // added label to id so the id is unique:
        id: 'vertLine_'+label,
        zIndex: 9999,

        // added plotLine event click - same as before.
        events: {
            click: function(e) {
                this.axis.removePlotLine(this.id);
            }
        },
        label : {
            text : label
        }
    });

Also, it looks like you're trying to make the chart NOT add a label if there is no text entered by the prompt. To do this, I would remend adding a condition && label != '' to your if-statement so in total it looks like if(label!=null && label != ''). I got this tip from This site.

Here is the updated fiddle: Click Here.

Note: to successfully click on the line every time, aim for the left side. Idk why, but this worked better for me. Hope this helps!

You can also catch click event by custom-events plugin and destroy SVG element (line+label)