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
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
...
}]
Considering this official demo. When my mouse moves to somewhere on x axis, a point in one of four series becomes highlight.
How to highlight points in same x value for all series when mouse move?
If I understand correctly, you need the "shared" option in the tooltip, i.e.,
tooltip: { shared: true }
Example
http://jsfiddle.net/bv05y6Lg/
In the stacked bar shown below
the negative values are represented with the reference line on top, this seems to be redundant with the original axis present below, is there a way to actually show only one axis in the place of 0 marker?
You can set a parameter opposite as true.
xAxis:{
opposite:true
},
Example: http://jsfiddle.net/2s85hcbu/
You can also disable gridlines on yAxis
yAxis:{
gridLineWidth:0
},
Example: http://jsfiddle.net/2s85hcbu/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 'datetime' chart which has one point per day. So my requirement is to have each date displayed on x-axis and value plotted for each date. So I have set the tickinterval as 1 day (24*3600*1000) as follows:
http://jsfiddle.net/vuf5e/1/
However, the x-axis seems to show only Aug28th and chart has two points on either side of it instead of showing one point for Aug27th and another one for Aug28th.
I tried using tickPositions and the chart appears as follows:
http://jsfiddle.net/vuf5e/2/
What is wrong here?
One of the numbers is wrong.
the second position in the tick is 137766608975 but then in the data is 1377666808975 which has a full digit more than the other.
You are in fact missing an 8 somewhere in the middle.
so basically the number on the second tick become smaller than the first one.
[...]
xAxis: {
type:'datetime' , tickPositions:[1377601929269, **137766608975**]
},
series:[{"yAxis":0,"name":"Device_INTERFACE_in_octets--.2","data":[[1377601929269,5.8583],[**1377666808975**,6.6278]]}]
});
});