CODEWITHSUNDEEP
javascriptchart.jsvue-chartjs
ChristianMurschall
ChristianMurschall

Reputation: 1701

Create ticks at certain time positions on a chartjs cartesian time axis

I created a realtime chart that updates about every 10 seconds by adding a new value and removing an old one.

Image of the realtime chart

I'm a bit unhappy about the chosen ticks of the time axis. Every 10 Minutes is fine, but I'd prefer values like 15:50,16:00,16:10. I looked around the documentation time axis but did not find anything promising. My definition of my xAxes looks like:

    xAxes: [
        {
          gridLines: {
            display: true
          },
          type: "time",
          time: {
            unit: "minute",
            unitStepSize: 10,
            displayFormats: {
              minute: "HH:mm"
            }
          },
          ticks: {
            min: 0,
            max: this.datapoints.length,
            autoSkip: true,
            maxTicksLimit: 10
          }
        }
      ]

I tried to loop over the dataset and find the 'first pretty time' object and set this object as my ticks.min object. But this did not work.

Upvotes: 2

Views: 916

Answers (1)

ChristianMurschall
ChristianMurschall

Reputation: 1701

OK I found it. The property is in the time attribute:

time: {
  unit: "minute",
  unitStepSize: 10,
  displayFormats: {
    minute: "HH:mm"
  },
  min: firstprettyTime, // <- moment js object
},

All praise to this guy's answer.

Upvotes: 2

Related Questions