We Keep Coding

chartjs - bar graphs size not increasing

I'm having an issue in setting bars width using chart.js.
This is my code:
<script>
var endpoint = '/api/';
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {
drawBarGraph(data, 'myChartBar');
console.log("drawing");
},
error: function (error_data) {
console.log(error_data);
}
})
function drawBarGraph(data, id) {
var labels = data.labels;
var chartLabel = data.chartLabel;
var chartdata = data.chartdata;
var ctx = document.getElementById(id).getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
barThickness: 0.9,
label: chartLabel,
data: chartdata,
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 0.2)',
borderWidth: 1
}]
},
options: {
scales: {
xAxes: [{
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}
</script>
I cannot increase the bar thickness.
I'm using Argon Dashboard with Django.
Is this an issue with theme's css?
What am I missing here?

Change this value
xAxes: [{
// Change this
barPercentage: 0.2
}]

impossible to remove scale from radar chart (chart.js)

I have been trying all day to remove the scale of a radar chart in chart js. Although the chart works just fine, nothing seems to be working to remove the scale. Unfortunately the documentation is not that helpful for that issue.
here is what the graph looks like. The scale looks the same everytime. Clearing cache from browser does not help either.
here is the code for the chart:
function setChart(){
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
type: 'radar',
data: {
labels: ['classA','classB','classC','classD'],
datasets: [{
label: 'revenue proportion per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
],
borderColor: ['rgba(255, 99, 132, 0.2)'],
borderWidth: 5
},
{
label: 'proportion of item quantity per class',
data: [0.25, 0.3, 0.15, 0.3],
backgroundColor: [
'rgba(54, 162, 235, 0.2)',
],
borderColor: ['rgba(54, 162, 235, 0.2)'],
borderWidth: 5
}
],
and the options:
options: {
scale: {
ticks:{
label: false,
min: 0,
max: 1,
fixedStepSize: 4,
showLabelBackdrop: false,
fontSize: 0,
color: "#eee"
}
}
options: {
scale: {
ticks:{
display: false
}
}
I am doing something stupid? Any help on that would be welcomed!

options: {
scales: {
r: {
pointLabels: {
display: false // Hides the labels around the radar chart
},
ticks: {
display: false // Hides the labels in the middel (numbers)
}
}
}
}

The linear radial axis documentation lists four configuration options (as of v2.9.3):
angleLines
gridLines
pointLabels
ticks
Each of these is an object that supports the display property. Specifying display: false in all four objects removes the scale.
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
Here's a working example:
new Chart('myChart', {
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D'],
datasets: [{
label: 'Series 1',
data: [0.25, 0.3, 0.15, 0.3],
}]
},
options: {
scale: {
angleLines: {
display: false
},
gridLines: {
display: false
},
pointLabels: {
display: false
},
ticks: {
display: false
},
}
}
});
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3/dist/Chart.min.js"></script>
<canvas id="myChart"></canvas>

Why is this Chart.js graph not showing the right colors?

I'm using Chart.js to show a bar graph from two datasets for every month to show the evolution of certain data. Now the problem is the way Chart.js is showing these bars.
var myChartIBM = new Chart(ctx1, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
datasets: [{
label: "Número de entregas",
data: entregas,
backgroundColor: [
'rgba(255, 99, 132, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)'
],
borderWidth: 1
},
{
label: "Número de reversas",
data: reversas,
backgroundColor: [
'rgba(54, 162, 235, 0.2)'
],
borderColor: [
'rgba(54, 162, 235, 1)'
],
borderWidth: 1
}
]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 500
}
}],
xAxes: [{
type: 'time',
distribution: 'series',
offset: true,
ticks: {
source: 'data'
},
time: {
unit: 'month',
tooltipFormat: 'll'
}
}]
},
tooltips: {
mode: 'x', // optional
callbacks: {
title: function(tooltipItems, data) {
let tI = tooltipItems[0];
return data.datasets[tI.datasetIndex].data[tI.index].x;
}
}
},
plugins: {
datalabels: {
formatter: function(value, context) {
return value['y'];
}
}
},
responsive: true,
maintainAspectRatio: true
}
});
My doubt is why is it showing grey after the first dataset and what could I do to fix this. Maybe should I always add a zero?
This is the code on PHP side which generates the data:
$col_entregas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_recepcion) as year, month(fecha_recepcion) as month"))->whereNotNull('fecha_recepcion')->whereNotNull('guia_recepcion')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();
$col_reversas = Device::select(DB::raw("count(serial) as cantidad, year(fecha_reversa) as year, month(fecha_reversa) as month"))->whereNotNull('fecha_reversa')->whereNotNull('guia_reversa')->groupBy('year', 'month')->orderBy('year', 'asc')->orderBy('month', 'asc')->get();
$ar_entregas = [];
$ar_reversas = [];
$meses_grafico = [];
foreach($col_entregas as $entrega)
{
$fecha = $entrega->year . '-' . $entrega->month;
$meses_grafico[] = $fecha;
$ar_entregas[] = ["x" => $fecha,
"y" => $entrega->cantidad];
}
foreach($col_reversas as $reversa)
{
$fecha = $reversa->year . '-' . $reversa->month;
$ar_reversas[] = [
"x" => $fecha,
"y" => $reversa->cantidad];
}

So I had to add a foreach to add the same color to every entry in both arrays and that fixed the issue:
var colors_entregas = [];
var border_entregas = [];
entregas.forEach(function (el){
colors_entregas.push('rgba(255, 99, 132, 0.2)');
border_entregas.push('rgba(255, 99, 132, 1)');
});
var colors_reversas = [];
var border_reversas = [];
reversas.forEach(function (el){
colors_reversas.push('rgba(54, 162, 235, 0.2)');
border_reversas.push('rgba(54, 162, 235, 1)');
});
Inside every dataset:
data: entregas,
backgroundColor: colors_entregas,
borderColor: border_entregas,

ChartJS BoxWidth not working

First, my JSFidle: https://jsfiddle.net/ethernetz/u8yc4tvb/
At the top of the chart, there is a pink box. I want that box to go away. Others have done this by adding
legend: {
labels: {
boxWidth: 0,
}
},
to their code to make the box go away. As you can see, this didn't affect my box at all. What am I doing wrong?

you should move the legend configuration inside the option object Fiddle
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['Completion'],
datasets: [{
data: [60, 20],
backgroundColor: [
'rgba(255, 99, 132, 0.8)',
'rgba(54, 162, 235, 0)',
],
borderWidth: 0
}]
},
options: {
responsive: false,
cutoutPercentage: 90,
events: [],
legend: {
labels: {
boxWidth: 0
}
}
}
});

Change X and Y axis font color

How can I change the color of the X and Y axes labels?
I was trying to use fontColor within scaleLabel but I might be doing it in the wrong place ?
I tried applying it within scale as can be found on the source code. I also tried under scales and even within xAxes.
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: 'red',
borderWidth: 1
}]
},
options: {
scale: {
scaleLabel:{
fontColor: 'red'
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
};
Reproduction online
I've been checking the documentation but it doesn't seem to be very clear to me.
And as chart.js doesn't provide enough examples, it is not easy to find out things sometimes...

$(function(){
var ctx = document.getElementById("myChart");
//Chart.defaults.global.defaultFontColor='red';
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend:{labels: {fontColor: 'orange'}},
title: {
display: true,
fontColor: 'blue',
text: 'Custom Chart Title'
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor: 'green'
},
}]
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
You can use fontColor inside ticks/label/legend:labels for a particular axis,
options: {
legend: {
labels: {
fontColor: 'orange'
}
},
title: {
display: true,
fontColor: 'blue',
text: 'Custom Chart Title'
} ,
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor: 'red'
},
}],
xAxes: [{
ticks: {
fontColor: 'green'
},
}]
}
}
or change the defaultFontColor to change font color of entire text elements drawn on the canvas.
Chart.defaults.global.defaultFontColor='red';

I might be late to this question, but this answer may be useful for people who are looking for the answers.
In Chart.js, to style the scale label and ticks we can use the below settings.
options: {
scales: {
xAxes: [{
display: true,
scaleLabel: { // To format the scale label
display: true,
labelString: 'X axis name',
fontColor: '#000000',
fontSize: 10
},
ticks: {
fontColor: "black", // To format the ticks, coming on the axis/labels which we are passing
fontSize: 14
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Y axis name',
fontColor: '#000000',
fontSize: 10
},
ticks: {
fontColor: "black",
fontSize: 14
}
}]
}
}
Please refer to the Chart.js documentation for all the properties. Study all the properties before doing your implementation.
Happy coding!

React JS - Create React App
"chart.js": "^3.7.0",
"react-chartjs-2": "^4.0.0",
I struggled with this problem, unfortunately accepted answer did not work for me, but then I tweaked it little bit and made it work.
Here is what I ended up with, hope this will be helpful for someone...
const options = {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
color: "#ffffff",
}
},
title: {
display: true,
text: 'License Usage',
color: "#ffffff"
},
},
scales: {
yAxes: {
ticks: {
color: "#ffffff"
},
},
xAxes: {
ticks: {
color: "#ffffff"
},
}
},
};

if we set the options as below then the font color of axes label values changes. For example I tried it on jsfiddle and it worked. The same also worked for my chart in rails app.
...
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
fontColor:'red'
}
}]
}
}
...

To change your chart object ticks and axes labels, do like so:
let changeItemColor = (item) => {
item.scaleLabel.fontColor = color;
item.ticks.fontColor = color;
item.ticks.minor.fontColor = color;
item.ticks.major.fontColor = color;
};
chart.options.scales.xAxes.forEach((item) => changeItemColor(item));
chart.options.scales.yAxes.forEach((item) => changeItemColor(item));
chart.update();