Show labels in stacked bar chart with Ng2Charts
Question
i have an Anuglar6 project with a stacked bar chart actually build with Ng2Charts. Is it possible to show the values within each sections of one stack ?
And if not, does anyone know a angular2 module which make this possible ?
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script data-require="chart.js@2.6.0" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>
<body>
<app-root>
<div class="spinner">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</app-root>
</body>
chart-options in *.component.ts
public barChartOptions: any = {
scaleShowVerticalLines: true,
responsive: true,
plugins: {
datalabels: {
display: true,
align: 'center',
anchor: 'center'
}
},
scales: {
xAxes: [{
stacked: true,
stackLabels: {
enabled: true
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true
}
}]
}
};
public barChartType = 'bar';
public barChartLegend = true;
*.component.html
<div class="row">
<div class="col col-sm-12">
<div class="card mb-12">
<div class="card-header">
<span>
{{ 'Production' | translate }} <small>{{ '(in pcs.)' | translate }}</small>
<small class="summary"><i>{{ 'Summary' | translate}} <b>{{ summary }}</b></i></small>
</span>
</div>
<div lang class="card-body">
<canvas baseChart [datasets]="barChartData" [labels]="dayLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)">
</canvas>
</div>
</div>
</div>
2 answers
solution1
0 2018-06-10 00:56:22
Since ng2-charts internally uses chart.js, This can be easily achieved using a Chart.js plugin called : chartjs-plugin-datalabels.
Here is the minimum options that need to be set for this plugin to display values inside (middle) of the stacked bars :
options: { //your chart options
plugins: {
datalabels: {
display: true,
align: 'center',
anchor: 'center'
}
}
}
although, there are tons of other options that you can use to further customize these values/labels (inside bars), which can be found here .
solution2
0 2019-09-16 08:42:50
You can try this:
animation: {
onComplete: function () {
const chartInstance = this.chart,
ctx = chartInstance.ctx;
const fontSize = 20;
const fontStyle = '600';
const fontFamily = 'Open Sans';
// ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
// ctx.fillStyle = '#676A6C';
this.data.datasets.forEach(function (dataset, i) {
const meta = chartInstance.controller.getDatasetMeta(i);
meta.data.forEach(function (bar, index) {
if (dataset.data[index] !== 0) {
const data = dataset.data[index].toLocaleString('it-IT', { maximumFractionDigits: 0 });
ctx.fillText(data, bar._model.x, bar._model.y - 0);
}
});
});
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.