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
Related
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'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 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 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/