highcharts draw datetime a week earlier - highcharts

I'm drawing a stockChart with Highchart, here the last data set:
[1582844400000,32.65863464265468],
[1583449200000,29.571543938725608],
[1584054000000,18.869729784689593]
1584054000000 is Fri 13 March 2020
1583449200000 is Fri 6 March 2020
Now when I plot the graph, the last value is shown as Mon 9 March 2020. Which from what I understand is correct because is the default value for the properties startOfWeek.
So I set this:
xAxis: {
type: 'datetime',
startOnTick: true,
startOfWeek: 5
},
Thinking to set the week correctly to Friday, indeed it works, but it shows me Fri 6 with value 18,86 so it's Fri 13, but for some reason it a week before. If I set startIfWeek at 4, it shows me Th 12.

From docs page
startOfWeek: number
For dateTime axes, this decides where to put the tick between weeks. 0 = Sunday, 1 = Monday.
Defaults to 1.
I was testing with this example from documentation, and it seems that from 0 to 4 it goes up on same week, but for some reason from 5 and 6 it goes back to previous week. Maybe it sets the average distance so the tick is not too distant from origin date.
xAxis: {
startOfWeek: 6,
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%a %e %b', this.value);
}
}
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3 * 24 * 3600 * 1000
}]

Related

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/

Change first tick position on xAxis

This is my chart
I need that tick start from the start of my chart, without padding left.
I tried read docs, but I couldn't find anything about it
Per the docs it should be doing this anyway with xAxis.startOnTick:
Whether to force the axis to start on a tick.
Use this option with the minPadding option to control the axis start.
Defaults to false.
So, perhaps you overwrote this in your chart code?
Update:
So, from your code what you have is a categorical xAxis and an area line chart. Stylistically* this does not make much sense as the entire category "bin" is one single value and you are putting in time values (I assume since they are ['00:00', '05:00', '05:00', '05:00', '05:00']). Why not make an actual time series xAxis? This would give discrete x positions based upon the time and you could see that area chart a bit clearer.
Sample time-based xAxis:
$(function() {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
startOnTick: false,
type: 'datetime'
},
series: [{
name: 'John',
data: [0, 3, 4, 7, 2],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Jane',
data: [2, -2, -3, 2, 1],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}, {
name: 'Joe',
data: [3, 4, 4, -2, 5],
pointStart: Date.UTC(2010, 0, 0),
pointInterval: 5 * 3600 * 1000 // 5 hour
}]
});
});
What I mean "stylistically" is that you have hard breaks from "00:00" to "05:00". So let's assume that is 5 hours between categories. Does an area plot really convey any information to the user since you have a 5 hour gap between points? Wouldn't a simply column chart make more sense here? If this is even 5 minutes between categories it seems a little iffy to make this an area chart.

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/

Highcharts: minorTickInterval doesn't work with specified categories

Here is a sample with specified categories: http://jsfiddle.net/galex/Fj25C/3/
If categories option is commented then minorTickInterval works well.
Is it Highcharts bug or is something wrong in options?
$(function () {
$('#container').highcharts({
chart: {
},
xAxis: {
tickInterval:1,
tickmarkPlacement: 'on',
gridLineWidth: 1,
categories: ["cat1","cat2","cat3","cat4","cat5"]
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
});
});
It is stated in the API that (bolding mine):
minorTickInterval: Number
Tick interval in scale units for the minor
ticks. On a linear axis, if "auto", the minor tick interval is
calculated as a fifth of the tickInterval. If null, minor ticks are
not shown.
On logarithmic axes, the unit is the power of the value. For example,
setting the minorTickInterval to 1 puts one tick on each of 0.1, 1,
10, 100 etc. Setting the minorTickInterval to 0.1 produces 9 ticks
between 1 and 10, 10 and 100 etc. A minorTickInterval of "auto" on a
log axis results in a best guess, attempting to enter approximately 5
minor ticks between each major tick.
On axes using categories, minor ticks are not supported.
Try it: Null by default, "auto" on linear Y axis, 5 units on linear Y
axis, "auto" on logarithmic Y axis, 0.1 on logarithmic Y axis.

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