Looks like a regression in 6.1.0 when upgrading from 5.0.14.
I create Y axis plot bands dynamically for a selected series by
chartObject.update({ yAxis: {plotBands: [...], plotLines: [...]} });
In this case whatever zIndex I assign to series or bands the series is rendered behind/below bands and is inaccessible interactively (e.g. tooltips are not displayed when hovering over points), bands get all mouse input. If I create the same bands right at the beginning together with series (before calling Highcharts.chart()), series remain accessible.
Even if I remove and then add series (recreate) after creating bands, it remains inaccessible.
Update:
Here's jsFiddle to reproduce.
Issue disappears if I exclude accessibility.js or exporting.js or include 'exporting' after 'accessibility'. In other words, issue can be reproduced by including accessibility module after exporting module.
Click the "Update bands" button repeatedly.
Related
My issue with the Highcharts Stacked Area chart is in how it selects which series to highlight. It SEEMS to highlight the series associated with the nearest point, whereas I would like it to highlight the series the mouse is actually hovering over.
In the image below, the mouse is actually hovering over the area in light blue, but because the nearest point is in the dark blue series, it's highlighting that area.
This causes an issue when you have multiple series stacked with very small and very high values (even zero). The user hovers a series with a large area, but the point it highlights might be associated with a series with no visible area (because it has a zero data point), and it will highlight the point with a tooltip saying something like "Switzerland: 0.00" rather than "Brazil: 9.999.99", even though you're hovering over Brazil
Disable stickyTracking and enable trackByArea options:
plotOptions: {
series: {
...,
stickyTracking: false,
trackByArea: true
}
}
Live demo: http://jsfiddle.net/BlackLabel/7ens45ot/
API Reference:
https://api.highcharts.com/highcharts/series.area.stickyTracking
https://api.highcharts.com/highcharts/series.area.trackByArea
I have 1 chart with 2 scatterplot series like so
The series have same data points, basically I am drawing 2-2D plots instead of 1-3D plot..
Series 1 has the legend while on 2 its disabled. When I hover my cursor over the legend I want the tooltip to show up in both the chart, so a user can correlate legend to points on scatter plots.
$('.highcharts-legend text, .highcharts-legend span').each(function (index, element) {
$(element).hover(function () {
chart.tooltip.refresh([chart.series[index].data[0], chart.series[index+data.length].data[0]]);
}, function () {
chart.tooltip.hide();
})
});
I use above code to create desired effect, but tooltip is not appearing at the right place. maybe its a limitation from highchart. It throws the following JS error
Could someone please suggest me a workaround?
If you could make the chart.tooltip.refresh to function properly that would be the best. Other wise I am willing to make a compromise with at-least having the points in both series in hovered state and 1 of them showing the tooltip.
here is a fiddle to see the problem in action https://jsfiddle.net/9eoyg283/1/ , Hover over the legend items and you would get JS error in the console.
I can create the desired effect if I create 2 charts instead of using 2 series, but then that complicates other things which are not desirable. So this solution is off
Thanks in advance
In a highcharts line chart, I want to present a link in the tooltip for people to explore the underlying data set for a specific point by clicking on it (done, I used useHTML). The chart itself is an aggregated view showing statistics for some values (y) for different categories (series) across time scale (x), hence the motivation for exploring the non-aggregated data.
However, when the chart becomes dense enough, the user cannot mouseover the tooltip to click the link because it updates with the adjacent data points from the next point/s. Thus, I want to stop the tooltip from updating when the mouse is directly on top of it. How am I able to do this?
You can play around with tooltip.positioner - to make sure user will be able to click that tooltip URL. Or just change logic, so user can click on column instead, just like demo here.
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().
When using Highcharts, is it possible to change the contents of the legend to display something other than the series?
For example, I have a scatter chart with just one series but with many elements, so that the element labels obstruct one another and are illegible:
Would it be possible to use the legend to display the element names instead of the series? (each member in the series has a different color so that it is possible to use the legend in this case)
EDIT:
It turns out there isn't any good way to do this, so I wrote my own custom legend. You can find the code here: http://pastie.org/5115536
I hope you find it useful
Highcharts allows to show data points instead of series name in the in the legend. But, Unfortunately its only for Pie charts type:pie.
There is a default option available for the Pie Chart though undocumented in the API.
legendType: 'point',
If you try to set it for other type of chart, Legend does not gets rendered.