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.
Related
I need to add graphic annotations in a chart on the date (x) axis, so I added a new series with a constant value of 0 (x: date, y: 0), with custom image markers. Annotations look like this:
The problem with this approach is that the constant 0 value in the annotation series is messing around with the automatically placed ticks (on the right), which then stretch the whole Y range from 0 onwards, instead of the min and max of other series, as it is by default. That drastically affects the display of other series, whose value are far away from 0, making them look less diverse.
Highcharts comes with an annotation module, bit I didn't find an option to pin it to the axis and use a different graphic.
Is it possible to either:
a) Prevent the annotation series to influence the Y axis ticks?
b) Make customized annotations on the X axis without adding new constant series?
The easiest solution here I think would be to create a new yAxis, and have your constant series use that yAxis. Like this:
yAxis: [{
...//original yAxis
}, {
visible: false //this hides all axis lines, ticks, and labels
}]
Then in the series, you would set:
series: [{
... //Real data series
}, {
yAxis: 1, //constant series
...
}]
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 cannot remove Y axis after I do : chart.yAxis[i].setExtremes(0, 100);. I need to be able to set max and min values for the axis dynamically, based on the index of yAxis - in this case I pass 1. All the other axis disappear fine because this line of code doesn't affect them. What's going on ? Fiddle ( click on Rainfall in the legend): http://jsfiddle.net/ytxetjpL/
Axis is hidden when the scale is not set (via min/max or setExtremes). More information here on github.
This addition should solve the issue.
Highcharts.Axis.prototype.hasData = function() {
return this.hasVisibleSeries;
};
example: http://jsfiddle.net/ytxetjpL/1/
Please refer the fiddle codehttp://jsfiddle.net/yuvarajkumarg/az290eyq/1/
In Highchart of type Chart, when we plot for height = 0 and pressure = 2, we get a gap as shown in jsfiddle. I want point to be plotted on the X-axis(2,0). But the graph looks like it is plotted on (2,2) since the y-axis plot starts way above the x-axis. How to remove the gap ?
The issue is the categorized axis.
There are probably a few ways around the issue, but I would do it this way (on your xAxis):
tickmarkPlacement: 'on',
min:0.5,
max:6.5
Example:
http://jsfiddle.net/az290eyq/2/
You could also do it by not using categories, and using the axis label formatter in order to display the numeric sequence that you need.
[[ edit for comments:
For the min and max values - the x axis values for a categorized axis are the category array index values. So the first category is x = 0, the second is x = 1, etc.
Because Highcharts puts the the label in the center of the value's space, setting the min/max to the actual min/max value +/- 0.5 will align the center of the space with the start/end of the axis.
So, you can calculate this dynamically by using 0.5 for the min, and counting the categories array and using (count -1.5) as the max.
Additionally, setting the tickmarkPlacement proerty to 'on' moves the tick mark to the center of the space as well, aligning the ticks with the start/end of the axis as well.
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.