this is my yAxsis and normally displays time for column range chart
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
return Highcharts.dateFormat('%H:%M:%P', this.value);
}
}
It normally works perfect when distance is some amount .
Question : When time distance between starttime and endtime is low then yAxsis dispalys 00:00 pm through the axsis I also tried %M:%P still dispalys 00:pm
here is the js fiddle
Thanks Sebastian .
minPointLength
did work..
Related
I have a dashboard that needs to display the total articles published in the chart.
my xAxis needs to show 12:00am - 12:00 pm - 12:00am
when the user hovers over the chart a tooltip should display the number of articles published per minute.
sample output when hover
12:00am - 55 articles
12:01am - 60 articles
12:02am - 45 articles
and so on...
I am just new to Highcharts, series options still confuse me.
Please click here to see the chart image I need
here's what I have
xAxis: {
type: 'datetime' //ensures that xAxis is treated as datetime values
},
series: [{
// number of articles published per minute
data: [55,23,45,60,78,56],
pointStart: Date.UTC(2021, 0, 1, 12, 0)
}]
}
I hope someone can help me thank you.
You need to add the tickInterval API documentation
serie: {
pointInterval: 12 * 3600 * 1000, // 12 hours interval
...
}
Demo Fiddle
I have requirement to extend date label formatting to show time period beside date when value is measured.
You can see on image how it should look.
Any way to achieve this by using format function of Highchart API?
EDIT: I need implementation without using third party solutions, since I need to embed solution into jasper report.
Thanks
As an alternative to use 'grouped categories' plugin, you can create additional xAxis labels by Highcharts. SVGRenderer.
chart: {
events: {
load: function() {
var chart = this,
ticks = chart.xAxis[0].ticks,
xy;
Highcharts.objectEach(ticks, function(tick) {
if ((tick.pos + 2) % 3 === 0) {
xy = tick.label.xy;
chart.renderer.text('date', xy.x, xy.y + 20)
.attr({
'align': 'center'
})
.add();
}
});
}
}
},
Live example: http://jsfiddle.net/BlackLabel/f7c54zop/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#text
The chart displays the wrong date at the data point, I would like the chart to display the correct date with the data label at the bottom. (see attached)
I would like the date displayed in the hover over to be the same as the date displayed at the datapoint on the xAxis
Here is the code that I have for this chart
xAxis: {
type: 'datetime',
min:new Date(new Date().getFullYear(),0,1).getTime(), // new Date().getTime()-365*24*3600*1000*.75,
max : new Date().getTime(),
labels:{
step:1
}
},
You need to use below option:
Highcharts.setOptions({
global: {
useUTC: false
}
});
I have been facing this problem in Highcharts for a while now
The tooltip :
At the top, the date hour is in UTC format, I want it to be in the same format the data is (or local time zone and it shouldn't change to UTC etc, remove the "T & Z" from the date also!)
My snippets of code that concern tooltip are as follows :
dateTimeLabelFormats : {
second : '%H:%M',
minute : '%H:%M',
hour : '%H:%M',
day : '%e. %b %a',
week : '%e',
month : '%b',
year : '%e'
},
labels : {
formatter: function(){
var daystr = Highcharts.dateFormat('%e %b %a', this.value);
var first = daystr.substring (0,daystr.length - 1);
return first; //return Highcharts.dateFormat('%e %b,', this.value);
}
And :
tooltip: {
shared: true,
valueDecimals: 2,
},
Also, the day coming on the x-axis is 2 days +/- , I tried removing the UTC format by setting useUTC to false, even that did not work.
I need to know how to get datehour in non-UTC format for the tooltip.
All approaches/suggestions are most welcome.
UPDATE :
Ok, somehow I am not able to remove the UTC from any of my tabs.
But it has somehow already removed from one tab. I have no idea how!
I used this at the end of my highcharts which is not working :
,setOptions : ({
global : {
useUTC : false
}
})
However, where exactly do I use the following as mentioned on the site ( This is not working )
Highcharts.setOptions({
global: {
useUTC: false
}
});
I really don't understand what is happening here. The first one should work technically.
Can you tell me exactly where to add these snippets, my huge code of highcharts starts as :
$j(function () {
$j('#container1').highcharts({
chart: {
zoomType:'xy'
},
credits: {
enabled: false
},
title: {
text: 'Trend Graph'
}, << And so on ....... >>
You need to indeed set useUTC to false and then use timezoneOffset to be the same as timezone used in data.
useUTC didn't work? How did you set this? Make sure the same way as in demos.
In your tooltip you should add xDateFormat for date format
tooltip: {
xDateFormat: '%Y-%m-%d',
shared: true,
valueDecimals: 2
}
If you want to have date with time you need to add like this
tooltip: {
xDateFormat: '%Y-%m-%d %H:%M:%S',
shared: true,
valueDecimals: 2
}
then remove dateTimeLabelFormats.
It's worth noting that useUTC should be set before creating your charts, otherwise it won't pick up the settings if you apply after.
I am working with flot jquery library to draw a chart
this is my code
chartOptions = {
xaxis: {
timeformat: "%H",
twelveHourClock: true,
as you see, i set the twelveHourClock option to true and yet I still get results like 14 18 20 ...
why please?
Update 1
I already tried to use %I %p in timeformat but then I got the following results, please check that the bellow values should be 8am 10am 12 ..... 8 pm
For zero padded 12 hour format,
xaxis: {
mode: "time",
timeformat: "%I %p",
tickSize: [1, "hour"],
twelveHourClock: true,
}