CODEWITHSUNDEEP
chart.js
zzmaster
zzmaster

Reputation: 327

How to display linear day ticks on x time-axe in Chartjs

I have dataset width random time moments and I'd like to display round dates on x axe like

|   |   |   |   |
12  13  14  15  16
oct oct oct oct oct

Looks like time.round iss the proper option, but it not works, my code

const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: chart_labels,
        datasets: [{
            label: 'Время доступа',
            data: chart_values,
            borderColor: ["#03A9F5"],
            borderWidth: 1,
            fill: true,
            backgroundColor: "#03A9F522",
            pointRadius: 1,         
            pointHoverRadius: 5,            
        }]
    },
  options: {
    interaction: {
      intersect: false,
      mode: 'index',
    },    
    tension: 0.4,
    scales: {
      x: {
        type: 'time',
        'time.round': 'day',
      },
      y: {
        title: {
          display: true,
          stacked: true,
          text: 'Секунды',
          beginAtZero: true
        }
      }
    },
  }
});

And ticks go by 3 hours: 5pm 8pm 11pm...

Edited

time: {round: 'day'} is not a correct parameter, it moves dots to the beginning of a day, when I need to keep dots where they are but draw ticks on the begining of the days. https://jsfiddle.net/7y2L9ueq/

Upvotes: 0

Views: 178

Answers (1)

user2057925
user2057925

Reputation: 2653

I think the issue is that you are using round option in the time. For what you need, you should use unit option, which is defining the time unit on the axis.

    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day' // <-- to use
        }
      },
      y: {
        title: {
          display: true,
          stacked: true,
          text: 'Секунды',
          beginAtZero: true
        }
      }
    }

Upvotes: 1

Related Questions