Fix axis ticks for multiple time periods comparison

src/components/charts/chartController.vue

@@ -394,16 +394,34 @@ export default {
  // this is called when there are multiple time period charts, it returns an array of all the
  // chart dates for that index so that they can be displayed on multiple lines
  buildXaxisTick (index) {
+ const interval = this.$store.getters[this.path + '/intervalUnit']
+
  if (this.chartData.datasets) {
  let tick = []
  for (let chart of this.chartData.datasets) {
  let date = ''
 
  if (chart.data[index]) {
  if (chart.data[index].originalX) {
- date = chart.data[index].originalX.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' })
+ date = chart.data[index].originalX
  } else {
- date = chart.data[index].x.toLocaleDateString('en-US', { month: 'numeric', day: 'numeric' })
+ date = chart.data[index].x
+ }
+
+ switch (interval) {
+ case 'day':
+ date = date.toLocaleDateString('en-US', { month: 'numeric', day: '2-digit' })
+ break
+ case 'hour':
+ case 'minute':
+ date =
+ date.toLocaleDateString('en-US', { month: 'numeric', day: '2-digit' }) +
+ ' ' +
+ date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' })
+ break
+ case 'month':
+ date = date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
+ break
  }
  }
 

src/components/charts/linechart.js

@@ -147,7 +147,7 @@ export default {
  source: 'data',
  // the following three settings change the x-ticks if there are multiple time periods,
  // otherwise the default settings are used
- autoSkipPadding: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 10 : 3,
+ autoSkipPadding: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 15 : 3,
  maxRotation: this.$parent.multipleTimePeriods(this.$parent.chartData.datasets) ? 0 : 50,
  callback: (val, index) => {
  if (this.$parent.multipleTimePeriods(this.$parent.chartData.datasets)) {