Time-series bar chart displays confusing x-axis ticks on weekly data

[michellethomas]

I'm not sure if this is a bug or if this is as desired but I wanted to discuss. In the new Time-series bar chart V2 the ticks on the x-axis don't always match up with the date for the bars if you use the weekly time grain. The tick may show a different date from the tooltip. This can be confusing when looking at a chart because sometimes it is not clear that the date shown on the axis is different from the date in the tooltip/plot. It can be particularly confusing when there is missing data.

The old Time-series bar chart shows the ticks matching the time data in the plot.

One solution could be to have options for how the ticks are displayed on the chart.

How to reproduce the bug

1. Go to Time-series bar chart V2
2. Select a weekly time grain
3. Plot data and see the x-axis ticks don't match up with the data

Expected results

X-axis ticks show different dates from the dates for the bar

Actual results

X-axis ticks show the dates that match with the dates for the bar

Screenshots

Weekly totals from the birth names datasource, the tooltip shows data for 12/29/91 and the ticks shows 1/1/92

Checklist

Make sure to follow these steps before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• I have checked the issue tracker for the same issue and I haven't found one similar.

[redsquare]

I am seeing this too with a day grain

[qlandman]

I am seeing similar behavior for the Time-Series Bar Chart v2. The behavior occurs for every time grain I select. The dates are shown as expected for the Time-series Bar Chart. using daily time grain:

Other charts I encounter the same date confusion are:

• Line Chart
• Time-series Line Chart
• Time-series Area Chart

[qlandman]

Upon further investigation I found this has to do with how Echarts handles the date axis. Take the following example:

var myChart = echarts.init(document.getElementById('main'));

var data =  [
      ['2018-12-31T00:00:00Z', 10, 5],
      ['2019-12-31T00:00:00Z', 15, 8],
      ['2020-12-31T00:00:00Z', 12, 10],
     	['2021-12-31T00:00:00Z', 19, 15],
  
];

var option = {
  legend: {},
  tooltip: {
    trigger: 'axis',
  },
  dataset: {
    source:data,
    dimensions: ['timestamp', 'sensor1', 'sensor2'],
  },
  xAxis: { type: 'time',
        	 axisTick: {
           	alignWithLabel: true
            
      		},
          axisLabel: {
          formatter: '{yyyy}-{MM}-{dd}',
          rotate: 45
          }
          },
  yAxis: { },
  series: [
  {
     name: 'sensor1',
     type: 'bar',
     encode: {
       x: 'timestamp',
       y: 'sensor1' // refer sensor 1 value 
     }
  },{
     name: 'sensor2',
     type: 'bar',
     encode: {
       x: 'timestamp',
       y: 'sensor2'
  }
}]
};
myChart.setOption(option);

See also: https://jsfiddle.net/78ozq0ft/6/

This yields:

Unfortunately I have not found out how to solve it in Echarts.

[villebro]

The temporal bar chart currently works similar to how the temporal line chart does, i.e. it shows the x-axis ticks on a linear scale as opposed to treating them as categories. This means that end-of-month data (e.g. 2012-12-31) will be displayed very close the the next start-of-month/year tick (2013-01-01). We're planning on adding a configuration option for forcing the x-axis to be categorical, and this should solve this problem for the majority of use cases. Whether or not this should be the default for bar charts is still being debated, but especially when a time grain is being applied, I assume forced categorical ticks would be the expected behavior.

[twratl]

I am seeing this issue still for weekly data (haven't tested other grains). Is there now a way to force the x-axis to be categorical?