Develop Reference

Change font colour of data labels on bar chart - chartsjs-plugin-data-labels

I have the following bar chart. here is the javascript options for 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,
},
},
],
},
};
Here is the html:
<canvas
baseChart
[datasets]="chartData"
[labels]="chartLabels"
[options]="chartOptions"
[colors]="chartColors"
[plugins]="[]"
[legend]="true"
[chartType]="'bar'"
height="300px"
>
</canvas>
Sometimes the data labels appear on the bars (see picture), but i can't figure out how to change the colour to make them white. Does anyone know?
UPDATE:
Here is the chart with new chartOptions, but still doesn't change the colour of the data labels:
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,
},
},
};

I think the issue is because you add the baels plugin config inside the legend configuration.
It should be:
options: {
...
plugins: {
labels: {
fontColor: "black",
fontSize: 12,
},
}
...
}

The problem was due to the 'chartsjs-plugin-data-labels' plugin i had. Fixed it by adding this to the datasets array.
dataLabels: {
colors: ["white"],
},

chart.js hide gridline inside chartarea but keep y-axis border

I would like to remove the gridLines, but still have a border on my y-axis. Here's what it looks like.
I cannot seem to find a solution.
I tried using drawBorder: true but it's overwritten by drawOnChartArea: false.
My code currently looks like this:
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
// drawBorder: true,
// display: false,
},
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}

Set scales.yAxes[0].gridLines.drawTicks to false and and some padding in gridLines.ticks.padding:
{
type: 'horizontalBar',
data: {
labels: [4, 3, 2, 1],
datasets: [{
data: [50, 60, 70, 180]
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
drawOnChartArea: false,
drawTicks: false,
},
ticks: {
padding: 10
}
}],
xAxes: [{
gridLines: {
drawBorder: true,
display: false,
},
ticks: {
display: false,
min: 20,
max: 70
}
}]
}
}
}

ChartJS: How to align top labels with bottom labels?

I have a chart - made with chartJS - that displays monthly data. There is a top label to indicate each new month at the top the chart. It is generated in xAxes with:
{
position: "top",
ticks: {
autoSkip: false,
maxRotation: 0,
callback: (_, i) => i
},
It works, but the top label is progressively shifting from its bottom label. it's weird. How to fix it?
screenshot
My code is:
{
legend: { display: false },
scales: {
yAxes: [
{
stacked: true,
ticks: {
beginAtZero: true,
},
gridLines: {
display: true,
zeroLineColor: "black,
zeroLineWidth: 0.5
}
}
],
xAxes: [
{
offset: true,
stacked: true,
ticks: {
fontColor: "black",
},
gridLines: {
color: "transparent",
zeroLineColor: "black,
z: 1
}
},
{
position: "top",
ticks: {
autoSkip: false,
maxRotation: 0,
callback: (_, i) => i
},
gridLines: {
drawBorder: false,
display: true,
lineWidth: 0.5
}
}
]
}

Removing little gap on left side Chart JS

I don't know how to remove space on left side which you can see on the image. I tried things like aspectRatio: 1 but doesn't work.
Here's the current config
const config = {
type: "line",
data: dataSets,
options: {
responsive: false,
maintainAspectRatio: false,
elements: {
point: { radius: 0 },
line: {
tension: 0,
},
},
scales: {
xAxes: [{
type: "time",
time: {
unit: "day",
},
ticks: {
display: false,
},
gridLines: {
tickMarkLength: 1,
color: "#d8d8d8",
zeroLineColor: "#d8d8d8",
},
}],
yAxes: [{
ticks: {
display: false,
},
}],
},
legend: {
display: false,
},
},
};

Chart.js add border around line chart, and yAxis unit title ([s])

I have problem with chartJS. I cannot add border around chart, yAxis unit title, and yAxis labelString with element. I'm using react with typescript. I can add only string to labelString. You can see what I want do do on screen and on another screen you can see what I actualy have.
Is there any options in chart.js#2.7.1 to add these elements?
First image is my goal. Second is actual.
#edit
This is my chartOptions file. I just pass arguments in function to get these options.
import * as Chart from 'chart.js';
const getOptions = (
beginAtZero: boolean,
tickMax: number,
tickStepValue: number,
titleText: string,
xAxesLabelString: string,
yAxesLabelString: string,
): Chart.ChartOptions => {
const ticks: Chart.LinearTickOptions = {
beginAtZero,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
max: tickMax,
stepSize: tickStepValue,
};
const options: Chart.ChartOptions = {
legend: {
display: false,
},
maintainAspectRatio: false,
responsive: true,
scales: {
xAxes: [{
display: true,
gridLines: {
display: false,
},
scaleLabel: {
display: true,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
labelString: xAxesLabelString,
},
ticks,
}],
yAxes: [{
display: true,
gridLines: {
drawBorder: true,
tickMarkLength: 15,
},
scaleLabel: {
display: true,
fontColor: '#3C3750',
fontFamily: 'Muli',
fontSize: 10,
fontStyle: 'bold',
labelString: yAxesLabelString,
},
ticks,
}],
},
title: {
display: true,
text: titleText,
},
tooltips: {
backgroundColor: '#E4677B',
callbacks: {
label: (tooltipItem, data) => {
return 'Time: ' + data.datasets[0].data[tooltipItem.index];
},
title: (tooltipItem, data) => {
return '';
},
},
custom: (tooltip) => {
if (!tooltip) {
return;
}
// disable displaying the color box;
tooltip.displayColors = false;
},
},
};
return {
...options,
};
};
export default getOptions;
public createChart({room, roomState, chartOptions, chartDataset, chartLabels}: ILineChartProps) {
const ctx = this.canvas.getContext('2d');
this.myChart = new Chart(ctx, {
data: {
datasets: chartDataset,
labels: chartLabels,
},
options: chartOptions,
type: 'line',
});
}

Adding one xAxes on top and one yAxes on right both showing nothing will do the job.
scales: {
xAxes: [{
/* Your xAxes options here */
}, {
position: 'top',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false
}
}],
yAxes: [{
/* Your yAxes options here */
}, {
position: 'right',
ticks: {
display: false
},
gridLines: {
display: false,
drawTicks: false
}
}]
}

This is what worked for me.
scales: {
xAxes: [
{
/* Your xAxes options here */
},
{
position: 'top',
ticks: {
display: false
},
gridLines: {
display: true,
drawOnChartArea: false,
drawTicks: false
}
}
],
yAxes: [
{
/* Your yAxes options here */
},
{
position: 'right',
ticks: {
display: false
},
gridLines: {
display: true,
drawOnChartArea: false,
drawTicks: false
}
}
]
}