luftikus143 luftikus143 - 5 months ago 260
jQuery Question

How to remove text which was added via chart.renderer in Highcharts

I have added labels to my graph, instead of a legend (see fiddle here). Once the graph has been drawn, with those series labels attached to it via chart.renderer.text, the user can click on a button in order to add an additional series, which, in turn, suppresses other lines (successfully). However, how can I get rid now of these labels - which stand there in the void now.

Example: this is the full set of lines and labels:
enter image description here

And this is when a button has been clicked in order to show an additional line, which suppresses at the same time four other lines:
enter image description here

I add the labels like this:

chart.renderer.text('Volcanic', 1170, 360)
.css({
fontSize: '13px',
color: '#7d7d7d'
})
.add();


Now, these labels are still there - but should go away. Any way I can achieve this? The possibility to add an ID, and then call a chart.renderer.byID(xy).remove() or something similar?

Answer

Looking at HC documentation, the only rendered element that seems to be removable is the rendered.path. However, looking at your code, you can use jquery to remove elements that got rendered. The text rendered in either text or a tspan within a text.

jquery, remove it like this. The code below will remove all (texts and series) when natural is clicked

var natural = ['Volcanic','Solar','Ozone','Orbital Changes']
 $(natural).each(function(i,d){
                chart.get(d).remove();
                $('tspan:contains("'+d+'")').closest('text').remove()
                $('text:contains("'+d+'")').remove()
            })

furthermore, i see that you hard coded the x,y location of your text rendered which is problematic when viewing in jsfiddle or when the screen is too small or too big. you can use plotX and plotY to determine where the line ends and plot it there. example:

var chart = $('#container').highcharts();
var point = chart.get('Land Use').points 'get all the plotted points
  point[point.length-1].plotX ' length -1 is the last point, this is x, plotY will get you y.  

Lastly, i think you're after the hide function since you will want to bring these (removed) series back when the other button is clicked. Hence, if you removed, you will have to re-render the series.