x-axis missing first label #9470

FlukeFan · 2021-07-25T16:21:07Z

Reopened as a separate issue to original problem here: #9468

Expected Behavior

Attempting to stack values on a bar chart, where the data x value has sparse time values.

The chart draws correctly I think, but the tooltip is not correct when hovering the mouse over the chart.
The data for 1st May should total 30 (10 + 20);
The data for 2nd May should total 50 (20 + 30);
The data for 5th May should total 40 (10 + 30).

Current Behavior

The x-axis label is missing for the first day:

Steps to Reproduce

Navigate to here: https://jsfiddle.net/Leelenaleee/8oLgvu41/1/

Environment

Chart.js version: 3.4.1
Browser name and version: chrome 92.0.4515.107
Link to your project: https://jsfiddle.net/Leelenaleee/8oLgvu41/1/

var ctx = document.getElementById('myChart').getContext('2d');

new Chart(ctx, {
  type: 'bar',
  data: {
    datasets: [{
      label: 'Amount1',
      backgroundColor: '#004c6d',
      data: [{
          x: '2010-05-01T00:00:00Z',
          y: 10
        },
        {
          x: '2010-05-02T00:00:00Z',
          y: 20
        }
      ]
    }, {
      label: 'Amount2',
      backgroundColor: '#b3cce2',
      data: [{
          x: '2010-05-02T00:00:00Z',
          y: 30
        },
        {
          x: '2010-05-05T00:00:00Z',
          y: 10
        }
      ]
    }, {
      label: 'Amount3',
      backgroundColor: '#547c9a',
      data: [{
          x: '2010-05-01T00:00:00Z',
          y: 20
        },
        {
          x: '2010-05-05T00:00:00Z',
          y: 30
        },
      ]
    }]
  },
  options: {
    plugins: {
    	tooltip: {
      	mode: 'x'
      },
      legend: {
        display: false
      }
    },
    scales: {
      x: {
        stacked: true,
        type: 'time',
        time: {
          unit: 'day',
          displayFormats: {
            day: 'YYYY-MMM-DD'
          }
        }
      },
      y: {
        stacked: true,
      }
    }
  }
});

The text was updated successfully, but these errors were encountered:

kurkle · 2021-07-29T06:22:35Z

This depends on the clients timezone. Because the timestamps are in UTC/GMT, and the bounds option is in its default value (for time scale) 'data', generated ticks outside data bounds are filtered out.
Now for me, at GMT+3, the first tick is 2010-04-30 21:00:00 UTC/GMT, which is filtered out. The fix here is either remove the timezone from the timestamps, or set bounds: 'ticks'

edit: or use round: 'day'

FlukeFan · 2021-08-06T15:39:40Z

OK, thanks.

FlukeFan added the type: bug label Jul 25, 2021

FlukeFan mentioned this issue Jul 25, 2021

Tooltip looks incorrect on stacked bar chart with sparse times #9468

Closed

FlukeFan closed this as completed Aug 6, 2021

kurkle mentioned this issue Sep 7, 2021

First tick label is not being rendered chartjs/chartjs-adapter-date-fns#34

Open

x-axis missing first label #9470

x-axis missing first label #9470

FlukeFan commented Jul 25, 2021 •

edited

kurkle commented Jul 29, 2021 •

edited

FlukeFan commented Aug 6, 2021

May	JUN	Jul
	21
2021	2022	2023

x-axis missing first label #9470

x-axis missing first label #9470

Comments

FlukeFan commented Jul 25, 2021 • edited

Expected Behavior

Current Behavior

Steps to Reproduce

Environment

kurkle commented Jul 29, 2021 • edited

FlukeFan commented Aug 6, 2021

FlukeFan commented Jul 25, 2021 •

edited

kurkle commented Jul 29, 2021 •

edited