I'm doing an areaspline chart where my gridlines on the x-axis are of the same colour as the background but different from the markers and the "information" background.
Here's a fiddle to exemplify: JSfiddle
I wanted the markers (and only the markers, the rest of the are would still have the gridline) to be "in front" of the gridlines so it's not cut in half.
xAxis: {
...
gridZIndex: 4,
...
I have tried moving the gridZIndex, the problem is that when I make it a value smaller, the part in grey stops having the grid which is not the effect wanted (although the markers stop being cut in half.
Is what I'm trying to do possible?
Without modifying the DOM it's not possible, so that's what I ended up doing. So, after closing the highcharts, using jquery you can do this:
$('.highcharts-markers').insertAfter($('.highcharts-grid')[1]);
Meaning that I moved the white markers on top of the grid. Problem solved.
(more suggestions to get around this are in the comment in this question)
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
Does anyone have any idea how to make a graph like this? It's basically 5 in one chart, each one represents a different dynamic value up to 100%. So like the man running icon would be 60%, scale 85%, sleep 8%, ect.
The icons in the middle obviously won't be part of the graph, they'd be a div overlayed the chart.
Can anyone help? If highcharts will not work, then what will?
When I zoom in on a series in highcharts, I've noticed that the first visible point of the series is where it starts to draw. This means that if the only point in the visible zoomed area is in the middle, then the line for that series only starts to draw in the middle of the window. Is there a way to make Highcharts render the previous value so that it does not "cut off" the previous values of the graph?
Before, zoomed out:
After, zoomed in (problem):
Desired:
I have tried setting cropThreshold and connectNulls (just in case) among other tweaks with no luck. Any suggestions?
The problem starts with the fact i have a very small area to plot a chart and i need to have markers on it as well. Now because of the small area, the markers are getting cut off and they are a key piece of information. So is there any way by which i can add some spacing between the border of the plot and the actual start of the data plot itself ?
Heres a running example: https://dl.dropboxusercontent.com/u/138190/charts/index.html
Set minPadding and maxPadding for xAxis. This will work as long, as yod don't have scrolling/panning options enabled.
long shot question here!
My chart has 3 views, in one of the views it shows the days of the month (1-31 etc)
My client wants to the highlight the Y-axis gridLines of days that are weekends, to be a darker color.
The other caveat is, I can't specify the stylistically different gridLines when creating the graph, only when I redraw the graph.
(Because this view isn't the initially view and I am redrawing me graph as the user navigates through the views.
ATM between redraws I am removing the old series, adding a new one, changing the chart title etc
Does anyone know how to do this?
While I think that #mg1075's solution of using the plot bands is the best way of doing this, if you wanted to get really crazy you can modify the gridlines through the dom. For example, make every other line red:
$.each($('.highcharts-grid path'),
function(i, elem) {
if (i % 2 != 0)
{
$(elem).attr('stroke','red');
}
});
});
Fiddle here.