In the following Highcharts graph, I'd like the last label in the x-axis to be 2017 instead of hidden. That way it's crystal what the last year in the chart is.
I'm hoping there's a way to accomplish this while keeping the tick interval at 2. In other words, the first label would be 1999, and the last would be 2017.
Use xAxis.endOnTick - Doc link
xAxis: {
endOnTick: true,
showLastLabel: true // Default is true but just in case
},
Fiddle
Related
I have Highstock with default data for each year from 2001 to 2009 as shown in below JSFiddle:
JSFiddle
Now on button click event I want to increase the xAxis extreme to year 2020 even though there is no data available.
I am trying to set extreme by following code:
var newDate = new Date(2019, 03, 23).getTime();
chart.xAxis[0].setExtremes(new Date(2000, 1, 1).getTime(), newDate, true);
But its not working.
In the Highcharts API we can read:
ordinal: boolean
In an ordinal axis, the points are equally spaced in the chart regardless of the actual time or x distance between them. This means that missing data periods (e.g. nights or weekends for a stock chart) will not take up space in the chart. Having ordinal: false will show any gaps created by the gapSize setting proportionate to their duration.
In stock charts the X axis is ordinal by default, unless the boost module is used and at least one of the series' data length exceeds the boostThreshold.
Defaults to true.
So, you need to disable the ordinal option:
xAxis: {
ordinal: false
},
Live demo: https://jsfiddle.net/BlackLabel/fzo7ahg0/
API Reference: https://api.highcharts.com/highstock/xAxis.ordinal
I have problem fixing the width of the bar and the tick interval in Highstock when I try to change zoom level in range selector. I tried to search online for many solution but none of them solve the exact problem I have. :(
I want the 1w to perform as it is now. I do not want the tick interval to become hourly due to the config I add for day option:
http://jsfiddle.net/neo_6053/LwcL205p/3/
xAxis: {
type: 'datetime',
ordinal: false,
dateTimeLabelFormats: {
day: '<b>%b %e</b>'
}
}
But I want the 1d to have tick interval of 1 hour and I want all the gap, bar width to be fixed. I tried many options but still failed to do so. You can see the chart messed up when drag to the far left.
http://jsfiddle.net/neo_6053/LwcL205p/5/
xAxis: {
type: 'datetime',
ordinal: false,
startOnTick: true,
endOnTick: true,
tickInterval: 3600000,
dateTimeLabelFormats: {
day: '<b>%b %e</b>'
}
}
My last resort will be to get the service to return all the missing date if Highchart cannot support that. But I wish not.
This line of code inside series configuration should solve your problem:
pointRange: 3600 * 1000
It forces Highcharts to set the range for every point to one hour. By default it's computed automatically and it seems that sometimes ranges are higher than desired (that's why there're empty spaces in your example).
Live working demo: http://jsfiddle.net/kkulig/svkm4un3/
API reference: http://api.highcharts.com/highstock/plotOptions.series.pointRange
I am facing a strange problem with highcharts(highstock) datagrouping. I want to show grouped data in week or month and at the same time zoom the chart to a specific period (I am using chart.yAxis[0].min = ). When the width of the overall chart is high and when I set the the zoom level to a short period (say a few months), data is not grouped to the period I specify.
Refer to the fiddle link below. I have specified datagrouping as 'month' ({units:[['month',[1]]], enabled:true}) and yAxis[0].min as 29 Jul 2010. You will observe that data is not grouped in months.
Now try to reduce the width jsfiddle result panel by dragging the divider. When the size of the result area (or the chart) is reduced, datagrouping starts working.
http://jsfiddle.net/amit657/of1mv8yv/2/
Any idea how can I force datagrouping and at the same zoom the chart to show data for a specific period?
To force data grouping set forced in dataGrouping to true.
Example: http://jsfiddle.net/of1mv8yv/4/
...
dataGrouping: {
units: [
['month', [1]]
],
enabled: true,
forced: true
}
...
I have a Highstock chart with Navigator which is synced to 4 Highcharts on same page. The Highstock dates don't line up with Highcharts dates plus it's a different format.
Highstock and Highchart:: xaxis:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
year: '%Y'
},
events: {}
},
Here's the site I'm working on, the file is to large for here. Click on any icon, then pick "Data and Charts". The top chart has a different date format and the bottom charts points don't line up with top chart. I'm sure its default behavior of both Highstock and Highcharts but I can't find a way around problem.
Any help would be greatly appreciated,
Michael
Your first chart, being a Highstock chart, has an ordinal x-axis (API). The other charts do not, as it is not part of Highcharts. You can solve this by setting it to false for the first chart:
$('#container1').highcharts('StockChart', {
xAxis: {
ordinal: false,
// ...
}
// ...
});
This also seems to fix your date formatting problem (I'm not sure why).
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/