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/
Related
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
Is it possible to get the tickmark exactly on its value, and not in the middle of the hour? In my heatmap I have 1/4h values, so the tickmark position doesn't make sense. To illustrate this, I take a sample of Highcharts and make a little modification:
https://jsfiddle.net/wczo89Le/1/
Definition of the yAxis:
yAxis: {
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 6, 12, 18, 23],
tickWidth: 1,
min: 0,
max: 23
},
Consider the 2 first hours in the charts. There are 1/4 value. But the tick of 00:00 is on 00:30.
Antoher problem is the tooltip doesn't show the value where the mouse is. But it is offset. So it's not possible to get the last value (23:45) in the day shown in the tooltip.
Many thanks
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.
Highcharts does a great job figuring out appropriate tick intervals.
However, I have a "duration" series (in ms), which I format e.g. like "3y 6M" or "1d 3h" or "3h 30min" for display. Because Highcharts is optimizing the tick intervals for the ms value (e.g. 10,000,000ms), I end up with awkward values such as [ 2h 46min 40s, 5h 33min 20s, 8h 20min ] rather than [ 3h, 6h, 9h ].
Can I get Highcharts to prefer multiples of certain values (e.g. 1000, 60 * 1000, 60 * 60 * 1000 etc)? I'd rather not have to calculate the exact tick interval myself (depends on chart size etc).
I think you should consider using datetime axis for yAxis. For example: http://jsfiddle.net/jRGvs/
yAxis: {
type: 'datetime'
},
series: [{
type: 'column',
name: 'Column',
data: [Date.UTC(1970, 0, 1, 2, 30),
Date.UTC(1970, 0, 1, 1, 45),
Date.UTC(1970, 0, 1, 4, 10),
Date.UTC(1970, 0, 1, 3, 30)]
}]
you can go with label > formatter for yAxis,
here you can write a routine which will handle the text/value to be displayed beside the grid line. but the thing is you cannot override the tick interval from here.
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