How to show only clicking legend data in c3js chart? - javascript

I have a line chart with multiple data. Here is the sample of my chart.
Normally legend data are automatically show/hide if I click that legend on chart.
But after I adding a function in legend like this,
legend: {
position: 'right',
item: {
onclick: function (d) {
console.log("onclick", d);
show(d); //when I click legend show some data
}
}
},
I don't get automatically show/hide if I click that legend on chart. But its not important for me.
Instead of this, I want to show only clicking legend data in chart. if I click data1 legend, I want to show only data1 line in chart and hide another data2,data3 and data4 line in chart.
But, I don't have any idea how to do this. I'm very appreciate for any suggestion.

Now, I can solve my problem. Here is the code.
legend: {
position: 'right',
item: {
onclick: function (d) {
console.log("onclick", d); //data1
show(d); //when I click legend show some data
chart.hide();
chart.show(d);
}
}
},
First, I use chart.hide(). This function will hide all data on chart.
After that, I use chart.show(d) and it can show only data of user click because I add user clicking legend as an argument.
Note: show(d) is not related with chart.show(d). Just a function
that I create for my need.

For those of you stumbling across this like I did while looking for a way to focus on a single series from a legend click (I'm used to a double-click doing this), it seems c3 added the ability to use alt-click to focus on a single legend item. See the commit here. It turns out this works in billboard.js as well, which is a fork of c3.

Related

Amcharts 4 : Disable single legend item programmatically

I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.

Is there a way to change color of a highchart graph by clicking on the line

Hi I am plotting my graph using highchart and I want to know if there is any way you could change the color of the line plotted by clicking on the line and change it with a color picker or something. I don't want to change it from the options with series.color. I want to let the user change it according to his likeness. Thank you.
Update
A chart like this : Line Graph Example
In a click event function you can update the series with a color that is taken from some input, for example:
plotOptions: {
spline: {
events: {
click: function() {
this.update({
color: $('#colorInput').val()
});
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/qgmfzkju/1/
API Reference:
https://api.highcharts.com/highcharts/series.spline.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#update

EchartsJS - Is there a way/workaround to listen to mouse events on the 'legend' component?

I have two graphs side-by-side (pie and line) and I'd like to be able to highlight a line in the line graph upon hovering a legend in the pie graph (without the legend toggling feature).
The mouse events doesn't seem to fire on the legend component.
There's the selectMode option for the legend, but that's not what I want since its toggling the
series in the pie chart.
I'm able to catch the legendselectchanged event and "undo" the toggling by setting selected option of the series to true again, but its not ideal and the animation still fires, was unable to disable it.
Any ideas or workarounds?
[ECharts v4] From what I know, legend component internally dispatches 'highlight' and 'downplay' actions, but you can subscribe to those events to.
chart.on('highlight', function (e) {
// e => {
// excludeSeriesId: ...
// name: ...
// seriesName: ...
// type: "highlight"
// }
});
// same for 'downplay'

highchart legend lables does not take mouse events

Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/

How to hide a highcharts pie slice programatically

I have a highcharts pie chart which allows you to remove slices by clicking on the legend.
http://jsfiddle.net/f3Lx6cxk/
I want to programatically hide slices aftr the chart has been rendered. In my jsfiddle, the button calls
chart.series[0].data[i].select();
which has the effect of sliding the slice out. I want a similar call to remove the slice altogether, but leave it greyed out in the legend (so point.remove is no good). The effect should be the same as clicking on the legend item.
You can use setVisible function:
$('#button').click(function () {
if(sliced)
chart.series[0].data[0].setVisible(true);
else
chart.series[0].data[0].setVisible(false);
sliced=!sliced;
});
http://jsfiddle.net/f3Lx6cxk/1/

Categories

Resources