I am using highstock by HighChart
When I provided certain data to HighStock, Handles of Navigators are unable to move.
its fiddle is http://jsfiddle.net/AbdulQ/ZvK7s/8/
Why its navigator handles are unable to move for specific data?
[1396310400000,40189.80078125],
[1398902400000,168386.40625],
[1401580800000,101377.5]
, but not for a large range of data? fiddle with large data is http://jsfiddle.net/AbdulQ/ZvK7s/9/
You should define minRange parameter, not range. Additionally, you have too much value.
check out code
xAxis: {
range: 86400000 * 30*6, // 6 months
minRange: 2,
labels: {
zIndex: 6,
},
tickInterval: 30*24*3600*1000, // 30 days
},
minRange: Number
The minimum range to display on this axis. The entire axis will not be allowed to span over a smaller interval than this. For example, for a datetime axis the main unit is milliseconds. If minRange is set to 3600000, you can't zoom in more than to one hour.
http://jsfiddle.net/patelrachith/ZvK7s/11/
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'm able to create in Excel a chart where...
The data is in a different date frequency based on the x axis
Two different chart types - line over bars
So for example, I can have a bar chart on the primary x-axis / y-axis that is aggregated by year. Then another series as a line that changes on a daily basis. What allows the line to show up as a daily time series (raw values) is the option to turn on the secondary x-axis. With this on, the two time series can work off a different date frequency.
Is this possible in highcharts? I've only been able to find examples of where it's possible to enable the secondary y-axis but both time series is in the same date frequency
Yes. The method to add a second x axis is exactly the same as it is to add a secondary y axis - you just make the changes to the xAxis properties instead of the yAxis properties, and specify the xAxis for you series instead of specifying the yAxis.
Example:
xAxis: [{
}, {
opposite: true
}]
And:
series: [{
data: [...data...]
}, {
xAxis: 1,
type: 'line',
data: [...data...]
}]
Fiddle example:
http://jsfiddle.net/jlbriggs/ko7ton0w/
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 time series chart in Highcharts where I would like users to be able to zoom in on specific date ranges. This is possible by setting zoomType: 'x'. However, once the chart is zoomed, the Y-axis does not rescale to best fit the visible data. For instance, if the original Y-axis runs from 0 to 100, and I zoom on an area with data that only runs 91 to 99, then I probably want the Y-axis to change to be 90 to 100 or something similar. Basically, I want figure out how to get Highcharts to re-run its axis-scaling logic considering only the visible data.
A halfway measure is to set zoomType: 'xy' which allows the user to draw a rectangle and zoom on that rectangle. However, this is inconvenient for the user in this context, as all they really want to be able to do is isolate a date range and then study the variation in the data in that range.
If you want to stick to highchart.js and not using highstock.js (as contrary to what they were suggesting here: http://highslide.com/forum/viewtopic.php?f=9&t=13983), you can do the following with your y axis:
yAxis: {
title: {
text: 'Number of appartements'
},
min: null, // Will for min and max to adjust when you zoom
max: null, //
startOnTick: false,
minTickInterval: 1,
showFirstLabel: false
},
It works just fine for me,
Quentin