highchart dual x axis with different datetime interval - highcharts

I want to compare two interval of a data series (eg. this year and last year), so I need dual x axis, and two series.
xAxises: [
{
min: Date.parse('2014-01-01 00:00'),
max: Date.parse('2014-12-31 23:59'),
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y.%m.%d.',
minute: '%H:%M',
}
},
{
min: Date.parse('2015-01-10 00:00'),
max: Date.parse('2015-12-31 23:59'),
type: 'datetime',
dateTimeLabelFormats: {
day: '%Y.%m.%d.',
minute: '%H:%M',
},
}
]
I see the series, I can zoom in, but zoom out and reset zoom not working by the second series/x axis. How can I plot this two series using Highchart?
Thanks!
(A demo is here: https://jsfiddle.net/e1o3jov3/)

Related

tick interval is not working while applying tick interval its showing x and y both values

i want to show each day date , but im getting alternative dates ,like
1 feb and 3 feb and 5 feb i need full date like below without missing any dates n y axis.tried tickinterval 1 but its showing x and y values both.
1-feb-2020
2-feb-2020
xAxis: {
tick,
type:'datetime',
dataLabels: {
align: 'right',
rotation: 45,
shape: null
}
},

You need to set tickInterval to one day and use the formatter function:
xAxis: {
...,
tickInterval: 1000 * 60 * 60 * 24,
labels: {
formatter: function(){
return Highcharts.dateFormat('%e-%b-%Y', this.value);
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4815/
API Reference:
https://api.highcharts.com/highcharts/xAxis.tickInterval
https://api.highcharts.com/highcharts/xAxis.labels.formatter

Setting the xAxis to the under config is a solution which you are looking for:
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
dateTimeLabelFormats: {
day: '%e-%b-%Y'
}
},
Demo: https://jsfiddle.net/BlackLabel/qmro0was/
API: https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats
API: https://api.highcharts.com/highcharts/xAxis.tickInterval

Highcharts Timeline with xAxis values

I need to create a chart with fixed values xaxis although it contains no data to graph like this:
Is importante the min value for yaxis must be (0) but show 1 grid line
(The color does not matter, and I need to show minute by minute interval, eg 18:50, 18:51, 18: 52, 18:53 ... 10 Total ticks)
as it should be the format xaxis?
as it should enter data values?

You can use showEmpty parameter of your xAxis and yAxis to show them without any data. You can also add min and max values for calculating the extremes of your axes.
If you want to have an interval of your ticks equal to 1 min you can set it using tickInterval: http://api.highcharts.com/highcharts/xAxis.tickInterval
Here you can find code that may help you:
$('#container').highcharts({
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 01, 01, 01),
showEmpty: true,
max: Date.UTC(2016, 01, 01, 01, 30),
tickInterval: 1000 * 60, // one minute
},
yAxis: {
min: 0,
max: 10,
showEmpty: true
},
series: [{
}]
});
And here you can find live example how it can work: http://jsfiddle.net/wys1duhq/1/

Dateformat not working for stacked column charts

I have a stacked column chart where in I am trying to show day today progress.
The x axis shows the date but the format is wrong.
http://jsfiddle.net/Mn6sB/7/
xAxis: {
minTickInterval: 24 * 3600 * 1000,
labels:Highcharts.dateFormat('%e %b',this.x),
categories: [Date.UTC(2013,8,8),Date.UTC(2013,8,9),Date.UTC(2013,8,10),Date.UTC(2013,8,11),Date.UTC(2013,8,12),Date.UTC(2013,8,13),Date.UTC(2013,8,14),Date.UTC(2013,8,15),Date.UTC(2013,8,16),Date.UTC(2013,8,17),Date.UTC(2013,8,18),Date.UTC(2013,8,19),Date.UTC(2013,8,20),Date.UTC(2013,8,21),Date.UTC(2013,8,22),Date.UTC(2013,8,23),Date.UTC(2013,8,24),Date.UTC(2013,8,25),Date.UTC(2013,8,26),Date.UTC(2013,8,27),Date.UTC(2013,8,28),Date.UTC(2013,8,29),Date.UTC(2013,8,30),Date.UTC(2013,9,1),Date.UTC(2013,9,2),Date.UTC(2013,9,3),Date.UTC(2013,9,4),Date.UTC(2013,9,5),Date.UTC(2013,9,6),Date.UTC(2013,9,7),Date.UTC(2013,9,8),Date.UTC(2013,9,9),Date.UTC(2013,9,10),Date.UTC(2013,9,11),Date.UTC(2013,9,12),Date.UTC(2013,9,13),Date.UTC(2013,9,14),Date.UTC(2013,9,15),Date.UTC(2013,9,16),Date.UTC(2013,9,17),Date.UTC(2013,9,18),Date.UTC(2013,9,19),Date.UTC(2013,9,20),Date.UTC(2013,9,21),Date.UTC(2013,9,22),Date.UTC(2013,9,23),Date.UTC(2013,9,24),Date.UTC(2013,9,25)]
}
I am sure I am missing something pretty simple.
Could any one help me here?
thanks
AP

Here is one way to approach:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
day: '%e %b'
}
}
....
series: [{
name: 'Todays progress',
data: [538,238,395,139,37,267,542,331,274,80],
pointStart: Date.UTC(2013,9,16),
pointInterval: 24 * 3600 * 1000 // one day
},
{
name: 'Total till date',
data: [13,551,789,1184,1323,1360,1627,2169,2500,2774],
pointStart: Date.UTC(2013,9,16),
pointInterval: 24 * 3600 * 1000 // one day
}]
Here is your updated jsFiddle (using less data): http://jsfiddle.net/Mn6sB/8/

Highstock: custom x-Axis with multi time labels?

I'd like to create a custom xAxis in Highstock.
The picture below show 3 examples of what I'd like to do.
Is that possible?
Thx!

You will need three xAxis to achieve that, or you will resign from ticks above axis line. This is full example how to create this: http://jsfiddle.net/3bQne/478/
xAxis options:
xAxis: [{
// force first axis to display one unit
dateTimeLabelFormats: {
hour: '%H:%M',
day: '%H:%M',
}
}, {
dateTimeLabelFormats: {
hour: '%e. %b',
day: '%e. %b',
},
// use default positioner, but with offset for labels
tickPositioner: function(min, max) {
var ticks = this.getLinearTickPositions(this.tickInterval, min, max),
tLen = ticks.length;
for(var i = 0; i < tLen; i++){
// translate axis labels by half day to position label between ticks
ticks[i] += 12 * 3600 * 1000;
}
ticks.info = {
higherRanks: [],
unitName: 'day',
totalRange: max - min
};
return ticks;
},
tickWidth: 0,
tickInterval: 24 * 3600 * 1000,
linkedTo: 0,
offset: 0,
labels: {
y: -4
}
}, {
// for ticks only
tickPosition: 'inside',
tickLength: 10,
tickInterval: 24 * 3600 * 1000,
linkedTo: 0,
offset: 0,
labels: {
enabled: false
}
}],

Highchart datetime x-axis : display end of month date instead of first day of month

In my chart, I try to display end of month performances over one year (at 31 Jan, 29 Fev, ..., 31 Dec). X-axis is defined as follow:
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b %Y'
}
}
}
The issue is that the scale automatically adjust to the appropriate unit (Months) and display the first day of the Month. As a result, my first element (at 31 Jan) is displayed above "Feb 2012" (same issue for other elements).
I was wondering if I could rather display the end of month day on my x-axis. Any idea?
Thanks,
Example

You can define a custom xAxis.tickPositioner with the positions at which the tick should appear as follows
xAxis: {
type: 'datetime',
tickPositioner: function() {
var ticks = [
Date.UTC(2012, 0, 31),
Date.UTC(2012, 2, 31),
Date.UTC(2012, 4, 31),
Date.UTC(2012, 6, 31),
Date.UTC(2012, 8, 30),
Date.UTC(2012, 10, 30)];
//dates.info defines what to show in labels
//apparently dateTimeLabelFormats is always ignored when specifying tickPosistioner
ticks.info = {
unitName: "month", //unitName: "day",
higherRanks: {} // Omitting this would break things
};
return ticks;
}
}
Customize tick positions | Highchart & Highstock # jsFiddle

Resources