0
423
VistasHow 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?
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
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>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta