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/
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.
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/
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.
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