I am building a graph with chartjs but I required it to show the name of the stack a2, b2, c2.
plugin for chartjs 3.2.0 is not working
https://v2_0_0-rc_1–chartjs-plugin-datalabels.netlify.app/guide/getting-started.html
JavaScript
x
55
55
1
<html>2
<head>3
</head>4
<body>5
<canvas id="myChart" width="668" height="284" style="display: block; box-sizing: border-box; height: 284px; width: 668px;"></canvas>6
</body>7
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js" integrity="sha512-opXrgVcTHsEVdBUZqTPlW9S8+99hNbaHmXtAdXXc61OUU6gOII5ku/PzZFqexHXc3hnK8IrJKHo+T7O4GRIJcw==" crossorigin="anonymous"></script>8
<script> 9
10
var ctx = document.getElementById('myChart').getContext('2d');11
var myChart = new Chart(ctx, {12
13
type: 'bar',14
data: {15
labels: ['A1', 'B1', 'C1', 'D1', 'E1'],16
datasets: [17
{ 18
label: 'a3',19
data: [1,2, 3, 4, 5],20
skipNull:true,21
stack: 'A2',22
backgroundColor: ['rgba(255, 99, 132, 0.2)'],23
},24
{25
label: 'b3',26
data: [6, 7, 8, 9, 10],27
stack: 'A2',28
skipNull:true,29
backgroundColor: ['rgba(54, 162, 235, 0.2)',],30
},31
{32
label: 'c3',33
data: [11, 12, 13, 14, 15],34
stack: 'B2',35
skipNull:true,36
backgroundColor: [ 'rgba(255, 206, 86, 0.2)',37
],38
39
40
} ,41
{42
label: 'd3',43
data: [null, 3, 7, null, 1],44
stack: 'C2',45
skipNull:true,46
backgroundColor: [ 'rgba(75, 192, 192, 0.2)',],47
} 48
]49
},50
51
});52
</script>53
54
55
</html>Advertisement
Answer
You can define a formatter that returns the stack name instead of the data value itself. The problem however is that the stack name will appear for each value. Therefore I don’t think, chartjs-plugin-datalabels lets you do exactly what you’re looking for.
JavaScript
1
15
15
1
options: {2
plugins: {3
datalabels: {4
align: 'end',5
anchor: 'end',6
formatter: (value, ctx) => { 7
if (value) {8
return ctx.chart.data.datasets[ctx.datasetIndex].stack;9
} 10
return value;11
}12
}13
}14
}15
Please take a look at your amended code below:
JavaScript
1
62
62
1
<html>2
<head>3
</head>4
<body>5
<canvas id="myChart" width="668" height="284" style="display: block; box-sizing: border-box; height: 284px; width: 668px;"></canvas>6
</body>7
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>8
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"></script>9
<script>10
var ctx = document.getElementById('myChart').getContext('2d');11
var myChart = new Chart(ctx, {12
type: 'bar',13
plugins: [ChartDataLabels],14
data: {15
labels: ['A1', 'B1', 'C1', 'D1', 'E1'],16
datasets: [{17
label: 'a3',18
data: [1, 2, 3, 4, 5],19
skipNull: true,20
stack: 'A2',21
backgroundColor: ['rgba(255, 99, 132, 0.2)'],22
},23
{24
label: 'b3',25
data: [6, 7, 8, 9, 10],26
stack: 'A2',27
skipNull: true,28
backgroundColor: ['rgba(54, 162, 235, 0.2)', ],29
},30
{31
label: 'c3',32
data: [11, 12, 13, 14, 15],33
stack: 'B2',34
skipNull: true,35
backgroundColor: ['rgba(255, 206, 86, 0.2)', ],36
},37
{38
label: 'd3',39
data: [null, 3, 7, null, 1],40
stack: 'C2',41
skipNull: true,42
backgroundColor: ['rgba(75, 192, 192, 0.2)', ],43
}44
]45
},46
options: {47
plugins: {48
datalabels: {49
align: 'end',50
anchor: 'end',51
formatter: (value, ctx) => { 52
if (value) {53
return ctx.chart.data.datasets[ctx.datasetIndex].stack;54
} 55
return value;56
}57
}58
}59
}60
});61
</script>62
</html>