[Chartjs]-Configuring locale with bundled (CDN) chartjs-adapter-date-fns.bundle.min.js?

4πŸ‘

βœ…

I switched to Luxon because i was having trouble with locales when using date-fns. Then it’s a simple one liner: luxon.Settings.defaultLocale = "fi";

The luxon library is also great for parsing time, so i recommend using it if possible. More on luxon

0πŸ‘

I’m using NuxtJS, but it doesn’t really matter. You just have to get the locales into your site. A little bit more on date-fns locales here

Then, in ChartJS options I did it this way and it worked:

const ausgaben = new Chart(ctx, {
    type: 'bar',
    data: {
      backgroundColor: '#fff',
      datasets: [
        {
          label: 'Ausgaben',
          data: app.chartData.first,
          backgroundColor: 'red',
          type: 'bar',
          order: 10
        },
        additionalDataset
      ]
    },

    options: {
      scales: {
        x: {
          type: 'time',
          distribution: 'linear',
          time: {
            unit: 'day'
          },
          adapters: {
            date: {
              locale: de
            }
          },
        }
      }
    }
  })

Leave a comment