104π
β
It seems like there is no such build in option.
However, there is special library for this option, it calls: βChart PieceLabelβ.
Here is their demo.
After you add their script to your project, you might want to add another option, called: βpieceLabelβ, and define the properties values as you like:
pieceLabel: {
// mode 'label', 'value' or 'percentage', default is 'percentage'
mode: (!mode) ? 'value' : mode,
// precision for percentage, default is 0
precision: 0,
// font size, default is defaultFontSize
fontSize: 18,
// font color, default is '#fff'
fontColor: '#fff',
// font style, default is defaultFontStyle
fontStyle: 'bold',
// font family, default is defaultFontFamily
fontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
}
23π
Use data labels plugin
https://chartjs-plugin-datalabels.netlify.app/
HTML integration
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
must be loaded after the Chart.js library!
Your code will be like this
options: {
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: '#36A2EB'
}
}
},
data: {
datasets: [{
// Change options only for labels of THIS DATASET
datalabels: {
color: '#FFCE56'
}
}]
}
You will see the values of datasets as a label by default if you want to override this. e.g by label
options: {
plugins: {
datalabels: {
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
}
}
2π
Use chartjs-plugin-datalabels and set the options like this
options: {
plugins: {
datalabels: {
formatter: function (value, context) {
return context.chart.data.labels[
context.dataIndex
];
},
},
},
},
it will render the labels text
Source:stackexchange.com