X-axis date range

[Ramesh-SA]

Documentation Is:

• [ ] Missing or needed?
• [ ] Confusing
• [ ] Not sure?

Please Explain in Detail...

Hi,

I have been using chart Js for a while now and its very fun and its meets almost every needs. Recently i came across one issue that i want the data for two different in x axis but it looks like something wrong in it.

with reference to the above image, The x axis has both date and time for each value in order to differentiate two dates (ex:27-apr-2022 10:20 AM & 28-apr-2022 10:20 AM). but i want to have one date only once in X axis, not for every value until the next date data arrives . How can i do that ?

Your Proposal for Changes

none

Example

No response

[igorlukanin]

Hey @Ramesh-SA 👋

but i want to have one date only once in X axis, not for every value until the next date data arrives . How can i do that ?

Let me clarify. Do I get it right that you'd like to have a single point on the X-axis for each day?

Given the data currently displayed on chart, there would be just two points: 27-Apr-2022 and 28-Apr-2022. Is my understanding correct?

[LeeLenaleee]

You can set options.scales.x.time.unit to 'day':

https://jsfiddle.net/1qfr974o/

Edit: In case you are using a category axis you can use the tick callback to achieve something similar (might need to adjust the logic a bit but main concept is the same):

var options = {
  type: 'line',
  data: {
    labels: ['red', 'red', 'blue', 'yellow'],
    datasets: [{
      label: '# of Votes',
      data: [20,4,5,66]
      }]
  },
  options: {
    scales: {
      x: {
        ticks: {
        	callback: function (val, index,ticks) {
          	const currentTickValue = this.getLabelForValue(val);
          	const ticksMapped = ticks.map(e => this.getLabelForValue(e.value))
          	return ticksMapped.indexOf(currentTickValue) < index ? '' : currentTickValue
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

https://jsfiddle.net/qsy9w7az/