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.
Related
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.
I am rendering a chart using Highcharts.js library
$('#container').highcharts({
title: {
...
I have some checkboxes to select which series to plot. Depending which series I plot the first time, the colors will be different.
How to reproduce
Go to the example: http://jsfiddle.net/1u98o3aq/1/
Select only "Tokyo" checkbox, click plot
Select "New york" checkbox, click plot
Select "Berlin" checkbox, click plot
...
As you can see, it is not using all the colors, all of them are plotted in blue.
You can now unselect everything, plot. Then select everything, plot. The 4 series will remain all with the same color.
However, if you start (Run) the example again, and this time select everything and plot, now it is rendered correctly. Now you can unselect everything and go one by one. The colors are right.
If you select now only the 2nd and the 3rd series, the 2nd and 3rd colors will be used (no blue).
It is like Higcharts is caching for each series a color (which should not) and chosing wrongly (starting from color 0) when adding more series to be shown.
Using custom colors does not solve the problem.
I think that your problem is connected with how you are loading your series to your chart.
Right now, when you are loading the new chart, you are basing into previously drawn series (you are updating the series array).
To avoid the problem you have, you should be able to make copy of your array before you will load it into your chart:
lastSeries = $.extend(true, [], seriesSelection);
Here you can see an example how it can work: http://jsfiddle.net/1u98o3aq/3/
I have been looking around for a simple'ish solution that would allowing user to disable certain records on the graph. I know Google Charts API offeres ways to remove columns and rows. However, I don’t want to remove a row, I would like to “disable” it, so that it wouldn’t be used in the calculations, very similar to the google.visualization.ChartRangeFilter, except in ChartRangeFilter you set the date range to focuse on.
i.e. we have a line graph, x and y axis, with three lines for New York, London and Paris. I click on one of the points on the “Paris” line and that would disable that particular point, if I am to click on same point again than it will be enabled once again.
Options that were concidered:
1\ https://developers.google.com/chart/interactive/docs/events#the-select-event to try to "disable" the cell that user would click on.
2\ I have also been thinking to select all records by default and let user unselect them
Wondering if someone has a potential solution?
I found a similar solution, whichI was thinking to utilise, except their you hide / show the lines, rather than particular values..
In the fiddle example they use to make function happen
column: 6,
roleColumns: [7],
display: false
http://jsfiddle.net/asgallant/6gz2Q/
I've been playing around with a highcharts bar chart and noticed some strange behavior. If I have a long name in the x axis (the categories), and if I have labels enabled to show up on the bars, not all the labels will appear. If I remove the long x axis name, then the label that wasn't appearing on the bar before will suddenly appear. I have a working Jsfiddle example here:
https://jsfiddle.net/p55t0bmf/ (notice label isn't appearing for one of the bars, should say 5 but nothing is there)
I placed a long name in the categories section to trigger this behavior:
xAxis: {
categories: ["LONG NAME THAT WILL BREAK US"]
}
Does anyone know why this would be happening, and is there a way to fix this behavior (without resorting to short x axis names of course)?
Set allowOverlap to true. When you have longer xAxis labels, then you have less horizontal space. Labels have padding which can overlap and hide some of them. Anyway, your demo works for me exactly the same way with or without long xAxis category.
Demo with all labels: https://jsfiddle.net/p55t0bmf/1/
stacking option cause this problem. If you set the stacking, then highchart change the label opacity automatically.
Solution : Remove stacking options from chart, if you dont need or write css to override label opacity.
I have following combined stacked bar with 2 data series: blue and red one. The red one is a single point (of line) and it is by default "invisible" (cover with blue data), you can hover over it, its Y coordinate is about 54 +1 for each day after this question is asked :)
Now the question is, how to make the red dot visible? If I select it, it remains on top, that is exactly what I want by default. Any ideas?
Thanks
I'm gonna answer my question, but it is just workaround (working though). After chart is ready, I'm listening to the 'ready' event and immediately select the single point like this
google.visualization.events.addListener(chart, 'ready', function() {
ac.setSelection([{row:0, column:5}]); // use proper values
});