I need to add a new series to this chart which will allow me to highlight / shade a particular range of dates. It needs to be 100% height of the chart.
I was looking at using another area series, but I couldn't get it working as I wanted it given I have two existing area series on this chart.
I thought another series which had a 1 or 0 for the particular point to indicate if it should be highlighted or not?
{name: 'mydates',
color:'red',
fillOpacity: 0.3,
data: [0, 0, 0,1,1,1,1, 1, 1,1,0,0],
type:'area',
stacking: 'percent'
},
http://jsfiddle.net/L3ynM/
The problem with my sample:
The 'mydates' series doesn't take 100% height of the chart
If the 'mydates' series begins midchart, it starts with an angle. I'd like it to go straight up
Unless you really need the legend entry, I would recommend using plotBands instead
http://api.highcharts.com/highcharts#xAxis.plotBands
You can also do it like this, if you do really need the legend:
http://jsfiddle.net/jlbriggs/JVNjs/305/
data:[[1.5,0],[1.5,80],[2.25,80],[2.25,0]]
It relies in part on setting a min and max, and using those min and max values as your y data points.
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 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
}],
I have a highcharts column chart with an x-axis for an entire year. Its type is datetime and its min/max is from 2014-01-01 to 2014-12-31.
Why is the tick/label for Jan 2015 displayed?
Full source at http://jsfiddle.net/nkjm2691/1/
I tried a number of things like setting the end date to Date.UTC(2014, 11, 31, 23, 59, 59) and experimenting with tickInterval. What I need eventually is a monthly tick (i.e. irregular interval) and the labels centered between the ticks. Using some voodoo logic to calculate the offset only ever works if the chart has a fixed width.
Quite surprisingly doing more or less the same with a chart of type areaspline works fine: http://jsfiddle.net/fm86v8fe/
I also checked a number of related SO questions like Is there a reliable way to have a 1 month auto generated tick interval with high charts? and HighCharts xAxis - tickInterval for month but they don't solve my problem.
You posted this JSFiddle. Just changing from type: 'column' to type: 'line' removes he label. Why?
That is because any chart type that is "column like" has a pointRange. This is defined differently depending on context, but for your datetime x-axis it is (API):
On linear and datetime axes, the range will be computed as the distance between the two closest data points.
It is this pointRange that causes your column to have their specific width. They have a span across the x-axis. As you can see on your chart each column has a range of a week, not just a single millisecond (which is the case for line-charts, and similar).
From my understanding this causes Highcharts to take some extra space to somehow better suit the point range of the chart points.
There are several things you can do. You can manually override the pointRange like this:
series: { pointRange: 1, data: ... }
This will make each column only 1 millisecond thick, and removes the label. You can fix the width with pointWidth:
series: { pointRange: 1, pointWidth: 10, data: ... }
Note however that this is static, so if columns suddenly get too close they'll start overlapping. Here's a JSFiddle demonstration.
Also you could do nothing and just set the max to be far enough back in time for pointRange not to include too much extra space, like this:
xAxis: { min : Date.UTC(2014, 0, 1), max : Date.UTC(2014, 11, 28) }
Note here that Highcharts seems to add more space once you go over to the 29th of December. Unfortunately I'm not exactly sure how this spacing is chosen (the 29th is a Monday..?).
Sebastian suggested some solutions that don't involve this type of manipulation at all. The chosen "solution" depends on the other requirements and desired behavior of the chart.
Set a max date as 1.12, remove time and set maxPadding as 0 value. In case when you use a tiem (23:59:59) tick Interval cannot be calculated properly. Second solution is using tickPositioner
https://jsfiddle.net/nkjm2691/50/
I am trying to set my X and Y axes to have set minimums, maximums and intervals. Easy enough according to the docs - and indeed I have had no problem working with Highcharts to date - in fact the complete opposite, it's an awesome, awesome tool. However, when I add errors bars to my line series', it seems to knock out the x-axis - http://jsfiddle.net/Su44W/
Simply changing to series' type to arearange (http://jsfiddle.net/46dsn/1), providing the same data points [x, low, high], the chart now respects my min, max and tickInterval on the x-axis. So this begs the question, is this a bug or and I doing something wrong?
From my understanding the errorbar causes the axis to consider itself part of a "column-like chart". That is, the points on the axis have a span. The result of this is that this piece of code is ran to prevent more ticks than there are points (found on line 7194 of the source):
// In column-like charts, don't cramp in more ticks than there are points (#1943)
if (axis.pointRange) {
axis.tickInterval = mathMax(axis.pointRange, axis.tickInterval);
}
I'm not exactly sure how this solves the problem, but in some way setting the pointRange of the errorbar series causes the axis to use that pointRange for the axis as well. I'm guessing it just uses the maximum point range of all series, or something similar. This means your specified tickInterval will be the "max" in the above mathMax-function. Like this:
{
name: 'Series 1 error bars',
data: [
[4,7.26,7.34],
[12,6.85,7.06],
[26,6.92,7.12]
],
linkedTo: ':previous',
color: "#013879",
zIndex: 0,
whiskerLength: 7,
type: 'errorbar',
pointRange: 0
}
Check this JSFiddle link for pointRange in action.
The negative effect that this will have is that the top and bottom line for your errorbars will have very short width. You can counter this by specifying a pointWidth for the series as well, as in this JSFiddle demonstration.
I have an odd request. My boss wants me to improve an existing chart with a second axis.
The blue area must define the scale of the second axis, like a percentage of completion for the reading of the green area. The 100% value must be at the maximum of the blue area. I can collect the highest value of the blue area without any trouble, but I don't know how to set the properties of the second axis according to this value. The thing is that the second axis does not have any data associated, therefore, he isn't shown...
Any idea ?
PS : I tried to be as clear as possible, but maybe that was not the case. Don't hesitate to tell me if you need more explanations.
You can use axis.linkedTo to get a second axis and data formatters to get the data formatted as percentages.
I'm not modifying the series data, only changing the text shown in the second yAxis scale, the tooltip and the data labels.
yAxis: [{
// Default options
}, {
linkedTo: 0,
opposite: true,
labels: {
formatter: function () {
return formatPercent(this.value);
}
}
}]
Example on jsFiddle: http://jsfiddle.net/uPHZx/