we are trying to create 3 X header lines, one containing the years, other the quarters and the last one containing months... something similar to this:
As you can see in the image above, we have 2 lines, one with years, the other one is quarters (3 months), we would like to add an additional line below each quarter with the months, our code looks like:
NOTE: As 3 months (quarter) is not something that has its label automatically, we created a label using the formatter.
Now when we try to add a third row like this:
What we get is something unexpected... years work right, while quarters are now extended like years, and the list of months is correct as follow:
The following image should give you a better idea of what we would like to achieve:
Thank you for any help you may bring. My code link is below.
Note this line in header it's called the x-axis, is an array of configuration objects. You can use xAxis.tickInterval to set the tick interval in axis units for each object.
In dateTimeLabelFormats, you can change the unit name to the required one.
xAxis: [{
tickInterval: 1000 * 60 * 60 * 24, // Days
labels: {
format: '{value:%e. %b.}',
style: {
fontSize: '8px'
}
},
units: [
[
'day',
[2]
]
]
}, {
tickInterval: 1000 * 60 * 60 * 24 * 30, // Month
/* labels: {
format: '{value:%b}',
}, */
min: Date.UTC(2014, 3, 17),
max: Date.UTC(2015, 11, 0),
currentDateIndicator: true,
units: [
[
'month',
[3]
]
],
dateTimeLabelFormats: {
month: {
list: ['Quater']
}
}
}, {
tickInterval: 1000 * 60 * 60 * 24 * 365, // Year
labels: {
format: '{value:%Y}',
style: {
fontSize: '15px'
}
},
linkedTo: 1
}],
Live demo: https://jsfiddle.net/BlackLabel/w3nb4oqj/
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
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/
I want to set the xAxis pointInterval in highstock.
I'm formatting the xAxis:
xAxis: {
type: 'datetime',
labels: {
formatter: function () {
var someDate = new Date(this.value);
return Myfunction(new Date(someDate));
}
}
},
I have searched and found some ways but they were not worked for me! In order to set the pointInterval for a day( 24 * 3600 * 1000 // one day ) I set it when I was adding a series:
chart.addSeries({
name: my name,
data: my data,
id: my id,
type: 'spline',
pointStart:start date,
pointInterval: 24 * 3600 * 1000 // one day
});
but It didn't work. so I tried to do sth else:
plotOptions: {
spline: {
pointStart: start date,
pointInterval: 24 * 3600 * 1000 // one day
}
},
It also did not work.
I've tested:
chart.xAxis[0].setCategories([data])
but this code makes the CPU working a lot and the browser crashes!
Actually I've seen these examples. but when I try them they aren't useful!
http://jsfiddle.net/larsenmtl/SJSwt/1/
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-overflow/
Please help me!
Thank you
UPDATE: my data is formatted like this:
series: [{
data: [
[Date.UTC(2010, 0, 1), 29.9],
[Date.UTC(2010, 0, 2), 71.5],
[Date.UTC(2010, 0, 3), 106.4],
e.g. jsfiddle.net/bahar_Agi/J6H7f
Pointstart only really applies if you haven't specified x values for your data or are using categories. As you have specified x and y values for each point, you should use the tickInterval option on the x-axis like this:
xAxis: {
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
},
tickInterval: 24 * 3600 * 1000
},
The highcharts api guide mentions this for datetime axis: http://api.highcharts.com/highcharts#xAxis.tickInterval
In this example, I set the tickInterval to 1 day, which may be a bit too small for your data, but you can change that to whatever interval you want.
I think you want to use tickInterval option for xAxis, see:
xAxis: {
tickInterval: 24 * 3600 * 1000,
type: 'datetime',
labels: {
style: {
fontFamily: 'Tahoma'
},
rotation: -45
}
},
jsFiddle: http://jsfiddle.net/J6H7f/1/