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
}
...
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 want to decrease the tickinterval of primary y-axes in my dual axes chart so that the columns height could increase. Chart is working well but due to high intervals, columns height is getting small. The data is dynamic and will remain the same as I have used in the example on jsfiddle.
Please see the jsfiddle i have created for this.
`http://jsfiddle.net/mr6dyh94/2/`
You have to set alignTicks property to false. In API documentation we can read:
tickInterval: number
...
If the chart has multiple axes, the alignTicks option may interfere with the tickInterval setting.
chart: {
alignTicks: false
}
Live demo: http://jsfiddle.net/BlackLabel/dcpz592x/
API: https://api.highcharts.com/highcharts/chart.alignTicks
I have a series of data collected every 15 minutes for a few weeks. Unfortunately, there's a week of missing data in the middle. This is just a fact of my business. When I use Highcharts to chart this data, it compresses the x-axis (time), skewing the chart. For example, the x-axis has major ticks every 2 hours until the missing week. Then it jumps to major ticks of days.
Regardless of the data, I need the x-axis to remain consistent. If this causes a large gap in the diagram, so be it.
I have skimmed the documentation but found nothing. If anyone could direct me to the relevant page that would be great. Thanks!
Refer: https://stackoverflow.com/a/13439281/1566575
You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time
xAxis: {
ordinal: false
}
Linear x-axis | Highstock # jsFiddle
Docs:
http://api.highcharts.com/highstock#xAxis.ordinal
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 series of points that has fast changing values, which makes it very spiky and uneasy to read when zooming out.
I would like to know if there is a way to draw above the already existing series, another one that would represent the average of, for exemple: every 10 points, or every point in a minute?
I've looked into dataGrouping but can't seem to make it work, is that what I'm looking for ?
Thanks for reading.
There is no current built-in method to do this. You would need to create a second series that is the running average and add it to the chart.
The main issue here is that HS has dataGrouping enabled by default for all series. So, when you add your second series that has dataGrouping enabled with params you want - it is also applied to the initial series. You only see one series on the chart because the 2 series are identical and overlap each other.
To fix this set dataGrouping off in the "real" series. Then have dataGrouping on in the averaged series. See this example.
...
series: [{
name: 'MSFT',
data: MSFT,
dataGrouping: {
enabled: false
}
}]
...