Highcharts' inferred categories for the yAxis aren't working like I'd expect. Setting
yAxis: { type: 'category' } and naming data points { name: 'Green', y: 1, x: 2 } doesn't set the yAxis labels to the name 'Green'. Is it possible to do this? What am I doing wrong?
Fiddle
That is correct. It will not work that way in Highcharts (with possible exception for pie charts maybe).
You need to set your categories explicitly, and either order the data points in order of their respective category, or supply the category array index as the appropriate x or y value.
example:
http://jsfiddle.net/jlbriggs/vtcyu3wt/
Edit: expanded answer based on comment
Ok, I was unaware of the change pointed out in your comment below. Per the API:
'Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category"'.
There are two things going on here though:
1) from what I can see, this only works on the x axis, and not the y (from my very limited testing).
2) even if it did work on the y axis, you are supplying too much info. The category name takes the place of the x value, so you can supply a name, and a y value. You are giving it a name, an x value, and a y value, so I don't think Highcharts could parse that even if it did work for the y axis.
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 have a chart where two graphs/series have different units. Therefore the y-Axis is different and the extremes are calculated separately from each other.
Is there a way to tell Highcharts to use the same scale, despite the different units, across all graphs/series?
Below is the chart. Relevant y-axis are the ones on the right, as an example. The units are different: "W/m^2" and "kW/kWp", however I want the scale to be the same.
Of course, one way would be a manual approach: in my controller, to go through all the data series and check the overall minimum and maximum value of all data series and then apply the extremes manually via
chart.yAxis[i].setExtremes(min, max)
but I was wondering if Highcharts has any way, like a configuration option, to achieve this.
I didn't find anything in the docs so far.
Thanks.
There is an option to achieve that. You can link one axis to another via linkedTo property.
From API:
linkedTo : Number
Index of another axis that this axis is linked to. When an axis is linked to a master axis, it will take the same extremes as the master, but as assigned by min or max or by setExtremes. It can be used to show additional info, or to ease reading the chart by duplicating the scales.
http://api.highcharts.com/highcharts/yAxis.linkedTo
Example: http://jsfiddle.net/n8tokqru/
yAxis: [{
}, {
linkedTo: 0
}],
Consider the following chart toy example which contains a missing value:
$('#container').highcharts({
chart: {
type: 'scatter',
},
plotOptions: {
scatter: {
lineWidth:1,
}
},
series: [{data:[[-3.8,0.4],[-3.3,-0.2],null,[-4.9,-0.7],[-4.8,-0.3]]}]
});
The points lie in the left side on the chart and don't span all its width, as it happens when you remove the missing point from the data series. In other words, the automatic min and max x-axis values seems to not be correctly computed.
In another one of my real examples the issue is more dramatic: all the data points are accumulated on a tiny strip on the left while the remainder of the chart area is completely empty.
What's wrong? It's a bug? There's a solution or a workaround?
You can't have a null x value in Highcharts.
If you want the null point to work as you've described, you need to provide an x value in order to tell the chart where the null y value is.
You've supplied your data in [x,y] pairs, so you must do that for all data points, including the null value.
Updated example, using [-3,null]:
http://jsfiddle.net/jlbriggs/2rNzr/69/
There, bizarrely, doesn't seem to be a way to target which Y axis a series is added to using the chart.addSeries() method. Nothing here (http://api.highcharts.com/highstock#Chart.addSeries%28%29) about targeting axes. This results in lines destined to be plotted against the oposite axis being incorrectly plotted in the left hand one; something I would have thought to be a basic prerequisite of the method.
Has anyone seen any hacks or plugins that might solve this or know where to go in the source to fix this?
That's what the yAxis property is used to specify in the series configuration object you pass into addSeries as the options parameter.
You can add serie as you define series in Highcharts, so you can use yAxis index. Take look at example http://jsfiddle.net/68Fp4/1/
$('#button').click(function() {
chart.addSeries({
name: 'ADBE',
data: ADBE,
yAxis:1
});
});