To have ticks on the x-axis in 15-minute increments using Chart.js, you can use the time scale and set the appropriate options. Chart.js provides the time scale to handle time-based data with various formatting options.

Here's how you can achieve ticks in 15-minute increments on the x-axis:

  1. Include Moment.js: Chart.js relies on Moment.js for time-based parsing and formatting. Make sure to include the Moment.js library in your project.

  2. Install and Import Chart.js Adapter: Since Chart.js version 3, you need to install the appropriate adapter to use Moment.js as the time scale adapter. Install the adapter using npm or yarn:

    npm install @chartjs-adapter/moment

    Then, import the adapter in your JavaScript or TypeScript file:

    import 'chartjs-adapter-moment';
  3. Create Chart with Time Scale: Use the Chart.js time scale for the x-axis and specify the unit and stepSize options to set the interval to 15 minutes:

    import Chart from 'chart.js'; const data = { // Your chart data here }; const config = { type: 'line', data: data, options: { scales: { x: { type: 'time', // Use time scale for x-axis time: { unit: 'minute', // Use minutes as the time unit stepSize: 15, // Set the interval to 15 minutes displayFormats: { minute: 'HH:mm', // Format for displaying time labels (optional) }, }, }, // Your other scale configurations (y-axis, etc.) here }, }, }; const myChart = new Chart(document.getElementById('myChart'), config);

With these configurations, the x-axis ticks will be displayed in 15-minute increments, and the time labels will be formatted as HH:mm (e.g., "12:15", "12:30", "12:45", "13:00", ...).

Remember to adjust the chart type, data, and other configurations based on your specific chart requirements. The key is to use the time scale in the x axis with the appropriate unit and stepSize options to achieve 15-minute intervals for the ticks.

Have questions or queries?
Get in Touch