How can I group bars with same month in ChartJS?

1
votes

I'm currently working on a chart where you can compare values from previous years with values from the current year.

Here is my code for the chart :

this.chart = new Chart(this.myChart.nativeElement, {
      type: 'bar',
      data: {
        datasets: []
      },
      options: {
        plugins: {
          legend: {
            display: false
          },
          tooltip: {
            enabled: true,
            callbacks: {
              label: (tooltipItem: TooltipItem<any>): string | string[] => {
                return `${tooltipItem.formattedValue} ${$localize`kWh`}`
              },
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true
          },
          x: {

            adapters: {
              date: {
                locale: 'fr-FR',
                zone: 'Europe/Paris'
              }
            },
            ticks: {
              source: 'labels',
            },
            display: true,
            type: 'time',
            time: {
              unit: 'month',
              displayFormats: {
                month: 'MMM',
                day: 'dd MMMM',
                week: 'WW-yy'
              },
              tooltipFormat: { month: 'long', year: '2-digit' }
            }
          },
        },
        transitions: {
          show: {
            animation: {
              duration: 0
            }
          },
          hide: {
            animation: {
              duration: 0
            }
          }
        }
      }
    });

Then I give my datasets to the chart this way :

initChartData() {
    this.chart.data.labels = this.dataObject.datas.map(c => c.startDate)
    this.chart.data.datasets[0] = {
      data: this.dataObject.datas.map(c => ({ x: c.startDate.toString(), y: c.data })) as any,
      backgroundColor: '#58c0d8',
      borderColor: '#58c0d8',
    }
    this.chart.update();
  }

I give the data as an object, so my tooltip has the correct date, because it is formatted via the time options i previously gave to the chart.

The problem is that, as I give the data in this way to the chart, the chart cannot superimpose the two set of bars and it gives me a result like this :

wrong beahvior

If I stop furnishing the data as an object, giving only the value, it gives a result almost good, like this :

desired aspect

but as you can see if I hover the second bar : enter image description here

it will give my the exact same month, from the same year, which is not the desired behavior. I completly understand why it is doing this, because as i dont give it any personnal label, the bar tooltip can't know his year, so as for me the only solution was to give the data as an object, but i can't make it work with the data side by side.

I've been struggling for two days now with this so I really hope someone can help me out, and I want to thanks anyone who will try in advance !

javascriptangularchart.js