'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?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
