I would like to link a pair of series in highcharts so that clicking either one in the legend turns both in the pair on/off.
For example, in this fiddle, if I click 1A in the legend I would like it to also turn off 2A but leave 1B and 2B unaffected. Clicking 2A should also turn off 1A, i.e. the link should work both ways.
Is there a way to achieve this?
You can also use linkedTo options from Highcharts, see: http://jsfiddle.net/GCqsf/4/
There is only one limit - linked series isn't displayed in legend, so probably it may not fit the best your example. Since Highcharts 3.0.7 you can set series.showInLegend = true to display linked series in legend.
You'll have to handle the legendItemClick event and specifically hide (and show) the "sister" series.
I have a running example in this jsFiddle.
Note that I'm using the links variable as an easy way to get the "sister" series for a given series.
Also note that I've added an id to each series so that chart.get() returns the series when given its id.
Related
I've got a plotly graph and am trying to use plotly_click to select and unselect individual points. This works fine when the hovermode: closest is enabled, and data.points returned by plotly click only contains a single array that is the series of points I clicked. If I switch to hovermode: x unified data.points now returns an array of arrays, one for each series of points in the graph, and it isn't possible to tell which series was clicked.
Here's a codepen that shows this behavior: https://codepen.io/occam98/pen/abYrYmV
change link 11 to 'x unified' and inspect the data object in the console to see this.
Is there a workaround for this? Ideally, I'd like to continue to use the x unified hovermode, but have plotly_click only return the series that was clicked, or have some other way to identify which point was clicked.
This is my treemap. I have 3 levels and I want to customize the labels like the provided picture.
to be more specific I want:
In the first level I want to have the first level labels out of the main box on the top and the second level should hide here.
After drill down in the second level I want to have the labels again out of the main box.
In all levels, I want to see the last level details in labels as shown in the sample image.
And is there a way to have 3 levels but just drill down into 2 levels?
And do you know why the colors change after drill down? the colors are not the same in the first level and third level!
Thanks a lot for your consideration.
.
As mentioned in comments by #WojciechChmiel the solution for the color difference problem is to set the parent color as transparent!
for having labels outside of the section box I used data label format function. In react the renderToString helped me to pass the react component as a title for levels.
I also could recognize the level of each label by:
const { level } = data.point.node;
with this, I could manage which desirable label to display!
-Running demo provided below!
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'm trying to make a column graph in Highcharts and it's not working out too hot. I'm essentially trying to give the column a background color that the data point can overlay. I want the effect of stacking without actually stacking if that makes sense. Any thoughts on what I can do?
Essentially I want it to look like a progress bar... there should be a distinct coloring between the top of the bar and the top of the graph itself. I've already tried stacking: percentage, but to no avail. Thoughts?
There are three options that come to mind:
1) To achieve the 'effect' of stacking, actually stack it: use a dummy series with a color set to the background color that you want, and set with values to fill the gap from the actual data.
Example:
http://jsfiddle.net/jlbriggs/Zf8C7/5/
[[edit for questions
The order of the series does not matter for this to work, and neither does the legendIndex.
What does matter, if you are using multiple series, is the stack property for each series - http://api.highcharts.com/highcharts#series.stack
Each group will need its own stack, and the dummy series and real series within each group need to be assigned to the same stack.
In addition, you need to have one overall max value.
Updated example:
http://jsfiddle.net/jlbriggs/4d9tm6b8/4/
(keep in mind, there are much smoother methods to process and build your data - this is a quick and dirty example whose purpose is to show how to properly use the stack property to do what you need)
]]
2) plotBands, as mentioned above
3) using the alternateGridColor property and set your data to skip an x axis
value between each point.
Reference:
- http://api.highcharts.com/highcharts#xAxis.alternateGridColor