cannery/assets/js/shot_log_chart.js

import Chart from 'chart.js/auto'
import 'chartjs-adapter-date-fns'

export default {
  initalizeChart (el) {
    const data = JSON.parse(el.dataset.chartData)

    this.el.chart = new Chart(el, {
      type: 'bar',
      data: {
        datasets: [{
          label: el.dataset.label,
          data: data.map(({ date, count, label }) => ({
            label,
            x: date,
            y: count
          })),
          backgroundColor: `${el.dataset.color}77`,
          borderColor: el.dataset.color,
          fill: true,
          borderWidth: 3,
          pointBorderWidth: 1
        }]
      },
      options: {
        elements: {
          point: {
            radius: 9,
            hoverRadius: 12
          }
        },
        plugins: {
          legend: {
            position: 'bottom',
            labels: {
              padding: 20
            }
          },
          tooltip: {
            displayColors: false,
            callbacks: {
              title: (contexts) => contexts.map(({ raw: { x } }) => Intl.DateTimeFormat([], { timeZone: 'Etc/UTC', dateStyle: 'short' }).format(new Date(x))),
              label: ({ raw: { label } }) => label
            }
          }
        },
        scales: {
          y: {
            beginAtZero: true,
            stacked: true,
            grace: '15%',
            ticks: {
              padding: 15,
              precision: 0
            }
          },
          x: {
            type: 'timeseries',
            time: {
              unit: 'day'
            },
            ticks: {
              source: 'data'
            }
          }
        },
        transitions: {
          show: {
            animations: {
              x: {
                from: 0
              }
            }
          },
          hide: {
            animations: {
              x: {
                to: 0
              }
            }
          }
        }
      }
    })
  },
  updateChart (el) {
    const data = JSON.parse(el.dataset.chartData)

    this.el.chart.data = {
      datasets: [{
        label: el.dataset.label,
        data: data.map(({ date, count, label }) => ({
          label,
          x: date,
          y: count
        })),
        backgroundColor: `${el.dataset.color}77`,
        borderColor: el.dataset.color,
        fill: true,
        borderWidth: 3,
        pointBorderWidth: 1
      }]
    }

    this.el.chart.update()
  },
  mounted () { this.initalizeChart(this.el) },
  updated () { this.updateChart(this.el) }
}