[Chartjs]-How to display k as thousand for the values of chart.js – Javascript

by

1👍

✅

To use the datalabels plugin you have to include it, you cant just pass the config and expect it to work. For the ticks you can use a callback

Chart.register(ChartDataLabels)

class Analytics {
  constructor() {
    this.months = [
      'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
    ]

    this.requestGraphData()
  }

  async requestGraphData() {
    try {
      const response = await fetch("https://duklrtest.ml/API/analyticsGraph")
      const body = await response.json()
      const data = body.analyticsGraph

      this.initChart(data)
    } catch (error) {
      console.error(error)
    }
  }

  initChart(data) {
    const canvas = $('canvas')
    let datasetsArray = []

    const datasets = data.forEach(item => {
      const {
        jan,
        feb,
        mar,
        sept,
        nov,
        dec,
        tagName
      } = item
      datasetsArray.push({
        label: tagName,
        data: [jan, feb, mar, 0, 0, 0, 0, 0, sept, 0, nov, dec],
        backgroundColor: [
          '#79939f',
        ],
        borderColor: [
          '#79939f',
        ],
        borderWidth: 1
      })
    })

    const graphChart = new Chart(canvas, {
      type: 'line',
      data: {
        labels: this.months,
        datasets: datasetsArray
      },
      options: {
        scales: {
          y: {
            ticks: {
              callback: v => `${v}K`
            }
          }
        },
        plugins: {
          tooltip: {
            callbacks: {
              label: (ctx) => `${ctx.dataset.label}: ${ctx.formattedValue}K`
            }
          },
          datalabels: {
            formatter: function(context) {
              return context + "k";
            }
          },
        }
      }
    })
  }
}
const analytics = new Analytics
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>

<canvas></canvas>

Leave a comment