The bar chart below shows the number of students. Here are the custom options for formatting it:
public chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
labels: {
fontColor: "black",
fontSize: 12,
},
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
};
This is how you embed the chart in your HTML file:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[plugins]="[]"
[legend]="true"
[chartType]="'bar'"
height="300px"
>
</canvas>
I'm having trouble changing the color of the data labels to white as shown in the picture below. Any suggestions on how to achieve that?
https://i.sstatic.net/sTlUD.png
UPDATE:
Even with updated chartOptions, the color of the data labels remains unchanged:
chartOptions = {
responsive: true,
maintainAspectRatio: false,
legend: {
display: true,
},
scales: {
yAxes: [
{
display: true,
stacked: false,
scaleLabel: {
display: true,
labelString: "Number of Students",
},
ticks: {
stepSize: 5,
min: 0,
max: 30,
fontSize: 12,
fontColor: "black",
},
},
],
xAxes: [
{
display: true,
stacked: false,
ticks: {
fontSize: 12,
fontColor: "black",
precision: 0,
},
},
],
},
plugins: {
labels: {
fontColor: "white",
fontSize: 12,
},
},
};