I hava a line chart on HighCharts that displays dateTimeLabels correctly. But if change it to type:column the labels are replaced by numbers and all columns have the same height.
http://highcharts.com/jsbin/ihorog/edit#javascript,live
(To check the error just uncomment type:column on jsbin)
This is because a column is drawn as being from zero to the value and since your values are created by Date.UTC(), zero is Jan 1, 1970. Since the labels span such a large time span it is doing something weird. Specify a min for your yAxis and it will start from there.
http://highcharts.com/jsbin/uvuvoh/edit#javascript,live
yAxis: {
min : Date.UTC(2013,0,1),
...
},
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 want to format the yAxis label and add trailing zeros after decimal. The number of precision will be decided dynamically as per the value of yAxis labels.
For Example: If there are 3 labels in yAxis with value 95.8, 95.825, and 95.85. then, it should be displayed as 95.800, 95.825, 95.850.
Edit:
Actually, the requirement is to have the decimal precision dynamically. Actually sometimes, our chart shows labels as 93,94,95, in this case we don't want to add precision. The idea is to add same precision, if the chart is generating, yAxis labels like 94.25, 94.5, 94.75, then, I want the chart to show yAxis labels as 94.24, 94.50, 94.75.
For dataLabels there are some format parameters you can add to your y values.
You can add this to the plotOptions structure like this:
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y:.3f}' // <<< .3f is 3 decimal places out.
}
}
},
Here is a modified fiddle:
http://jsfiddle.net/ja799vep/
More details from highcharts.com:
http://www.highcharts.com/docs/chart-concepts/labels-and-string-formatting
EDIT:
Sorry the example above was just for datalabels...Here is an improved example that shows, xAxis, yAxis, dataLables and toolTip with different '3 decimal place' approaches.
http://jsfiddle.net/franktudor/okce7p7n/
My xAxis is displaying the years with decimals depending on the width of the screen, so if its small it will display(2012,2013,2014...) but when I increase the width of the screen it will display (2012, 2012.1, 2012.2, 2012.3 ...) and the decimal places change depending of the width(2012, 2012.5, 2013 ...)
I know that tickPixelInterval has some effect on that but I don't know what value to use, I`ve tried:
xAxis: {
tickPixelInterval: 100, //also tried 10 and 1 and 1000 even null
crosshair: true
}
What can I do so the chart only displays the whole number of the years (2012, 2013, 2014) not depending on the screen size and NOT giving an specific width to the div that renders the chart?
http://jsfiddle.net/antonioj1015/ff2m2bsx/7/
tickPixelInterval will give a setting of how far apart ticks should be - that won't help in your situation, and will in fact make sure the problem persists.
What you want is just tickInterval, and set it to 1, since your year numbers are in increments of 1:
http://jsfiddle.net/ff2m2bsx/8/
if you won't always have increments of 1, another option is the allowDecimals property:
http://jsfiddle.net/ff2m2bsx/9/
References:
http://api.highcharts.com/highcharts#xAxis.tickInterval
http://api.highcharts.com/highcharts#xAxis.allowDecimals
A 3rd option is using a datetime x axis type, and setting the dates as your x axis values, and setting your tickInterval to one year.
http://api.highcharts.com/highcharts#xAxis.type
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 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]]}]
});
});