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
Related
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
HIGH CHARTS
In addition to this question, I would like to ask another question here in this thread.
How to add extra tears(ticks), in such a way, the green bar dataLabel, does stay inside plotting area, rather, going out of plotting area or made hidden. JSFIDDLE
There are lots of ways to do this. But quickest one is adding a max value to yAxis with using yAxis.max.
yAxis: {
allowDecimals: false,
max: 6000
},
Here is the working example: jsFiddle.
OR
You can use the combination of yAxis.tickAmount and yAxis.tickInterval like this;
yAxis: {
allowDecimals: false,
tickAmount: 10,
tickInterval: 1000
},
Here is the working example: jsFiddle.
Besides setting a new max property or trying a different combination of ticks, you can simply set overflow property with 'none' value and crop with false. This way you can display data labels outside the plot area.
API Reference:
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.overflow
http://api.highcharts.com/highcharts/plotOptions.series.dataLabels.crop
Example:
http://jsfiddle.net/2qtpx0rL/
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 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/