I have a Highcharts with two series (one as type "line" and other as "scatter"). The "line" serie has 1000+ value points and the "scatter" serie has one value point (the y value of this point is = 2)
I want to select the "scatter" point on the yAxis, but this point will not be selected. Instead of this point, the other points (line) are selected. The property "allowPointSelect" is set to true
Other important options that are enabled:
crosshair = true (xAxis only)
stickyTracking = true;
What I have tried already:
the radiusPlus and radius properties changed to bigger value <100 (plotOptions.series.marker.states.hover and plotOptions.series.marker.states.select)*
Note: It's very difficult to reproduce this in jsfiddle with 1000+
values :(. That's why I added some screens).
Does anyone have a solution for this?
If you are never wanting the user to select the scatter point (or any scatter points) you can set the zIndex of the series such that the line series is rendered "above" the scatter series. From the docs:
zIndex: Number Define the visual z index of the series.
Defaults to undefined.
With no z index, the series defined last are on top With a z index,
the series with the highest z index is on top
I have a highcharts with multiple y axes. Each y axis has multiple series associated to it based on the measurement unit. For instance if we have 3 series with measurement unit "W", they will be associated to the same y Axis.
Users have the option to remove series at button click. Series are removed in the following way:
chart.series[channelIndex].remove(false);
After a series is removed we update the y axis limits as follows.
If a axis has series with no values, Y axis will have limits set to (0, 10). I add default limits in the following way:
// If there are no data in the series and if no limit was previously set we update the limits to (0, 10)
if (yAxis.dataMax == null && limits.max == null) {
limits.max = 10;
}
yAxis.update({
min: limits.min,
max: limits.max
}, false);
The problem is, that yAxis.datamax is not updated after a series is removed. So even if the yAxis has no series, dataMax and dataMin still have the same values before the series was removed.
I don't understand why y dataMin and dataMax are not updated after a series is removed . So any suggestions why this behavior is present would be very useful.
It's caused by disabling redraw:
chart.series[channelIndex].remove(false);
If you would replace false<=>redraw or just remove false it would work properly. Chart's redraw will recalculate datamin and datamax.
I am using highcharts for the first time, and I am trying to figure out how to set the Y axis points static.I would like to know how to set y-axis values as -0.0000000001,0.00000000,0.0000000001 and so on in Highcharts.
I have used min=-0.0000000005 and max=0.0000000005 , and the points on y axis come up as 0,0.0000,0.0000... Wherein I want it as -0.0000000001,0.00000000,0.0000000001
You can use label formatter and Highcharts numberFormat then return correct values.
I have a working time history plot that removes one data point as another one is added after two minutes of data has accumulated. The trouble is that after say 10 minutes it is fairly difficult to see the duration of the data set being displayed (even using tickInterval). Is there a way to display fixed x axis labels after two minutes of data has accumulated? Specifically, I'm looking for truly fixed labels that do not scroll to the left with the data.
I tried using setCategories:
chart.xAxis[0].setCategories(cats, true);
Where cats is an array with sacrificial values prepended that will be removed during the shift, but the x axis labels still scroll left and I don't want that.
Thanks.
Edit:
I guess the way I previously described what I wanted to display on the x axis is not ideal. A better way to display this time (x) axis would be to have -120 on the far left and 0 on the far right. This would still require a non-scrolling x axis where the left most data point is over -120 and the right most data point is over 0.
If I'm following you, you want to shift off the start of the series, but leave the xAxis alone?
You can just set an xAxis min:
xAxis:{
min: 0
}
See example.
EDITS
In response to your comment. I think the easiest thing to do would be to shift the data yourself and then use setData to redraw the series.
newData = [];
var seriesData = chart.series[0].data;
// shift the data
for (var i = 0; i < (seriesData.length - 1); i++){
newData.push({x: seriesData[i].x, y: seriesData[i+1].y});
}
// new point for last
newData.push({x: seriesData[seriesData.length - 1].x,
y: Math.random() * 100});
chart.series[0].setData(newData, true);
Updated fiddle.
I am drawing a line chart with monthly data points. However, I want the scale to display year strings only.
So far, so easy. However, as far as I can see, Highcharts will always draw the xAxis labels relative to the ticks... and I am required to display them centered between ticks.
Is there some simple way of doing this that I am missing, please...?
According to my understanding, the behavior you desire is: http://jsfiddle.net/msjaiswal/U45Sr/2/
Let me break down the solution :
1. Monthly Data Points
One data point corresponding to one month :
var data = [
[Date.UTC(2003,1),0.872],
[Date.UTC(2003,2),0.8714],
[Date.UTC(2003,3),0.8638],
[Date.UTC(2003,4),0.8567],
[Date.UTC(2003,5),0.8536],
[Date.UTC(2003,6),0.8564],
..
]
2. Scale to display only yearly ticks
Use chart options like this:
xAxis: {
minRange : 30 * 24 * 3600 * 1000, //
minTickInterval: 12* 30 * 24 * 3600 * 1000 // An year
},
There is no simple, out-of-the-box solution. You have to use events and reposition the labels accordingly. Here is a sample solution that also works when resizing the browser window (or otherwise forcing the chart to redraw), even when the tick count changes: http://jsfiddle.net/McNetic/eyyom2qg/3/
It works by attaching the same event handler to both the load and the redraw events:
$('#container').highcharts({
chart: {
events: {
load: fixLabels,
redraw: fixLabels
}
},
[...]
The handler itself looks like this:
var fixLabels = function() {
var labels = $('div.highcharts-xaxis-labels span', this.container).sort(function(a, b) {
return +parseInt($(a).css('left')) - +parseInt($(b).css('left'));
});
labels.css('margin-left',
(parseInt($(labels.get(1)).css('left')) - parseInt($(labels.get(0)).css('left'))) / 2
);
$(labels.get(this.xAxis[0].tickPositions.length - 1)).remove();
};
Basically, it works like this:
Get all existing labels (when redrawn, this includes newly added ones). 2. Sort by css property 'left' (they are not sorted this way after some redrawing)
Calculate offset between the first two labels (the offset is the same for all labels)
Set half of the offset as margin-left of all labels, effectively shifting them half the offset to the right.
Remove the rightmost label (moved outside of chart, by sometimes partly visible).
This can be done with a workaround by manually adjusting the label positioning via a callback (called on both load and redraw). Please see the fiddle linked to in my comment on this post: Highcharts - how can I center labels on a datetime x-axis?
There are several xAxis options which may help do what you want.
http://api.highcharts.com/highcharts#xAxis.labels
Take a look at 'align' which specifies whether the labels are to the left or right of the tick, and also 'x' which allows you to specify a x-offset for the label from the tick.
Have you tried to use tick placement ? http://api.highcharts.com/highcharts#xAxis.tickmarkPlacement