Develop Reference

how to display 24 hours in xAxis on Highcharts

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

FullCalendar Resource View - Week View w/Previous 3 Days Shown

I have provided a TimelineResourceView below as a reference as an example current setup.
Example: If Week View Sun-Sat Then anytime navigating forward/backward, always show week view with previous 3 days from week range. Then anytime navigating forward/backward, always show week view with previous 3 days from week range.
FullCalendar Example Timeline ResourceWeekView
https://codepen.io/motogeek/pen/yLLpjLV
I tried many different things from docs such as "visiblerange" and forcing dates with no success.
https://fullcalendar.io/docs/visibleRange
[Sun Oct 27 – Sat Nov 2] but they want to see [Thurs Oct 24 – Sat Nov 2] to show the previous 3 days.
calendar.setOption('visibleRange', {
start: '2019-10-24',
end: '2019-11-02'
});

Persistence paid off. I achieved a custom view using VisibleRange and with Moment javascript library. I answer this myself knowing this could be helpful for others formulating a custom view. Mine was focused on the timelineResourceViewm but should be able to apply to the other day/week views etc.
See CodePen:
Working Example Week View with Previewing Last 3 days (10 Day View)
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'interaction', 'resourceTimeline' ],
timeZone: 'UTC',
header: {
left: 'today',
center: 'title',
right: 'resourceTimeline'
},
defaultView: 'resourceTimeline',
views: {
resourceTimeline: {
visibleRange: function (currentDate) {
// Generate a new date for manipulating in the next step
var startDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
var endDate = new Date(moment(currentDate).startOf('week').format("YYYY-MM-DD"));
// Adjust the start & end dates, respectively
//10 Day WeekView PREV Thurs -> Sun-Sat
startDate.setDate(startDate.getDate() - 3); //Set Past (show back Thur)
endDate.setDate(endDate.getDate() + 7); // Set Future (standard week from Sun)
return { start: startDate, end: endDate };
}
}
},
slotLabelFormat: [{ weekday: 'short', month: 'numeric', day: 'numeric', omitCommas: true }],
slotLabelInterval: { days: 1 },
editable: true,
resourceLabelText: 'Rooms',
resources: 'https://fullcalendar.io/demo-resources.json?with-nesting&with-colors',
events: 'https://fullcalendar.io/demo-events.json?single-day&for-resource-timeline'
});
calendar.render();
document.getElementById('prev').addEventListener('click', function() {
calendar.incrementDate({ days: -7 });
});
document.getElementById('next').addEventListener('click', function() {
calendar.incrementDate({ days: 7 });
});
});

For anyone else coming across this. v5 now supports this as visible range.
https://fullcalendar.io/docs/visibleRange

Fullcalendar Now() Indicator positioned wrongly

In Fullcalendar, when setting the parameters
mintime
and
maxtime
the Now() indicators is not positioned properly.
I have a JSFiddle to show the issue.
In this Fiddle I would expect the indicator at the current date and time, however it is positioned at the top of the column of "yesterday"
Below is the code used in the fiddle
HTML
<div id="calendar"></div>
Javascript
$('#calendar').fullCalendar({
defaultView: 'agendaWeek',
height: 600,
nowIndicator: 'true',
minTime: "20:00:00", // this makes the calendar start at 8PM
maxTime: "44:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives'
})
Removing the
minTime
and
maxTime
parameters, makes the Now indicator position properly, as shown here
https://jsfiddle.net/8jndrp7m/2/
How can I position the Now indicator properly when using minTime and maxTime?
Or is this a bug?

i see multiple problems:
the now indicator doesn't need quotes, change 'true' to true,
If you want to extend the maxtime past midnight you can just put a 1. in front of the time, to set times the next day.So 8 in the morning on next day would be maxTime: '1.08:00:00'
If you start the calendar at 8 in the evening and its not 8pm yet (at least in my timezone) the now indicator will not show properly

The problem look like that you are set maxTime for next day which why it not working
If you like specify date to set max use validRange to set min & max date
$('#calendar').fullCalendar({
defaultView: 'agendaWeek', //agendaWeek
validRange: {
start: '2017-05-01',
end: '2017-06-01'
},
locale: 'nl',
timezone: 'local',
themeSystem: 'bootstrap3',
height: 600,
slotDuration: '00:10:00',
nowIndicator: 'true',
minTime: "17:00:00", // this makes the calendar start at 8PM
maxTime: "20:00:00", // this makes the calender end 24 hours later at 8PM ( (8PM => 20) + 24 = 44)
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
editable: true, // enable draggable events
droppable: true, // this allows things to be dropped onto the calendar
})

Remove UTC date from Highcharts tooltip

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.

Highcahrt time format issue

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