Question

0

428

Views

How to display k as thousand for the values of chart.js - Javascript

I am using chart.js, I wanna display the values as thousand format in K.
I googled a lot and find out these answers: How to show thousand in k format for bar values in chart.js
I tried every answer posted there but nothing worked for me. My Code:

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: {
                plugins: {
                    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>

<canvas></canvas>

Here is the screenshot where i wanna append K:

Can someone help to resolve this?

about 4 years ago · Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-28T08:08:35.804Z

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>

0

428

How to display k as thousand for the values of chart.js - Javascript

1 answers

0

Find remote jobs

Andres GPT