JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Charts & Data Viz › Dynamically change x axis to a date/time value › Reply To: Dynamically change x axis to a date/time value

July 18, 2022 at 8:32 am #103373
svetoslav_borislavov
Participant

Hi,

To format the x-axis label`s values you can use the formatFunction. Here is an example for setting the value to hh:mm :

formatFunction: function (value) {

const hours = value.getHours().toString().padStart(2,0);

const minutes= value.getMinutes().toString().padStart(2,0);

return hours + ':' + minutes;
}

You can centre the x-axis centred on the hour with the baseUnit set to ‘hour’.
The gap between the hours can be set with the unitInterval set to 1. This will make the gap to be one hour.

To set the starting point to be yesterday`s hour you can create a date variable and set it to the minValue:

const yesterday = new Date();
yesterday.setDate(yesterday.getDate() -  1);

you can set the minValue to yesterday

If you need further assistance, do not hesitate to ask!

Best Regards:
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/