On Clicking the Legend value, hiding and showing the line chart
By the below script you can hide and show the lines in the line chart:
widget.on('ready', function(sender,se) {
$("svg > g.highcharts-legend > g > g > g:nth-child(1) > path:nth-child(1)").click(function(d){
if($("svg > g.highcharts-series-group > g:nth-child(2)").css("display")=="none"){
$("svg > g.highcharts-series-group > g:nth-child(1)").find("path:nth-child(1)").show()
$("svg > g.highcharts-series-group > g:nth-child(2)").show()
}else{
$("svg > g.highcharts-series-group > g:nth-child(1)").find("path:nth-child(1)").hide()
$("svg > g.highcharts-series-group > g:nth-child(2)").hide()
}
});
$("svg > g.highcharts-legend > g > g > g:nth-child(2) > path:nth-child(1)").click(function(d){
if($("svg > g.highcharts-series-group > g:nth-child(4)").css("display")=="none"){
$("svg > g.highcharts-series-group > g:nth-child(3)").find("path:nth-child(1)").show()
$("svg > g.highcharts-series-group > g:nth-child(4)").show()
}else{
$("svg > g.highcharts-series-group > g:nth-child(3)").find("path:nth-child(1)").hide()
$("svg > g.highcharts-series-group > g:nth-child(4)").hide()
}
});
$("svg > g.highcharts-legend > g > g > g:nth-child(3) > path:nth-child(1)").click(function(d){
if($("svg > g.highcharts-series-group > g:nth-child(6)").css("display")=="none"){
$("svg > g.highcharts-series-group > g:nth-child(5)").find("path:nth-child(1)").show()
$("svg > g.highcharts-series-group > g:nth-child(6)").show()
}else{
$("svg > g.highcharts-series-group > g:nth-child(5)").find("path:nth-child(1)").hide()
$("svg > g.highcharts-series-group > g:nth-child(6)").hide()
}
});
});
Please sign in to leave a comment.
Comments
1 comment