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.
Related
I have so many lines displayed in my graph, that I wanted to add a function to turn them off, and turn only selected ones on. That's why I have a "Show Legend", "Show All" and "Hide All" button alongside my graph:
Now, a strange thing happens, when I click directly on the button "Hide All" (usually I click on "Show Legend" first, and then on "Hide All" - then, everything is as expected): the graph lines disappear (good), but the graph get's extended to the right, visible by the extended X-axis line (bad):
If I "Show All" lines again, the graph looks like this:
Can anyone help me out on this? I tried to fix the graph width in the "chart" settings, but that's clearly ignored. What else can that be?
Thanks for any hints!
I just thought of an idea you could try. Indeed, if you remove all series from a graph like this, the behavior you observed with the x-axis labels and right side disappearing is expected. What about this approach:
Have one "dummy" series with zeroes for all of its values. Make it white or otherwise invisible (but not hidden, meaning don't set visible: false), and use the showInLegend: false and enableMouseTracking: false only on that series so the user doesn't get a chance to interact with it. When you trigger your buttons to hide all of the series, add a condition to ignore (or restore) only the "dummy" series.
This way, your bundle of lines are removed for the user, but the presence of the "dummy" series tells the graph to keep the axis labels.
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/
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/
I'm having an issue when I add flags dynamically to a Highcharts chart. The thing is that when I do so, the flags are not drawn on the chart until I do something that makes the chart refresh (for example, drag the mouse over some button with a tooltip).
I've noticed that this has something to do with the fact that I add the flags inside a point's click event.
point: {
events: {
'click': function() {}
}
}
I assume this is the case since when I add flags to the chart in other parts of the code they appear instantly.
What could be the reason of this behavior?
I want to use both animated zoom and range selector in the vertical barchart plotted using Dygraph. Setting both animateZoom and rangeSelector options to true is not working . But any one of these two are working fine individually.Please suggest me the solution. Any help would be greatly appreciated.
Those two options don't work very well together, so the combination is disabled. When you have a range selection, you typically zoom the chart by dragging the handles on either end of the selected range. The resulting sequence of mousemove events results in what looks like an animated zoom. Animating the zooms between those events would be superfluous.
Seems like there is a workaround. Try this:
1. disable range selector initially
2. have a button in your page that has an event handler that updates the graph options and sets rangeSelector to true
3. click this button on document load. Now both animatedzoom and range selector will work