Related
I need help on bar thickness using chart.js v3.5
Issue: I set the bar thickness "barThickness: 55," and after in responsive I don't know to manage it in responsive
here is my code which I have used, Please let me know what should I do for the solution. Thanks.
Here I Have the issue which is created in responsive, have a look on the image url : image link
var myNewChartB = new Chart(ctx, {
type: "bar",
data: barData,
options: {
borderSkipped: false,
borderRadius: 3,
plugins: {
barRoundness: 1,
legend: {
display: false,
},
title: {
font: {
size: 16
},
display: true,
text: 'Researchers (n=3)',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
datalabels: {
display: true,
clamp: true,
formatter: (val, context) => (`${val}%`),
anchor: 'start',
align: 'end',
}
},
responsive: true,
tooltips: {
enabled: false,
},
barThickness: 55,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "Scroes (1-9)",
},
grid: {
display: false,
drawBorder: false, //<- set this
},
},
y: {
display: true,
ticks: {
display: false
},
title: {
font: {
size: 16
},
display: true,
text: "% of Respondants",
},
grid: {
color: '#9B9898',
drawBorder: false, //<- set this
},
},
},
},
});
I have Created a snippet. Take a look. Charts are responsive automatically.
I didn't know from where this data: barData, is coming. So I have created my own dataset.
const ctx = document.getElementById('myNewChartB').getContext('2d');
const myNewChartB = 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: 55
}]
},
options: {
borderSkipped: false,
borderRadius: 3,
plugins: {
barRoundness: 1,
legend: {
display: false,
},
title: {
font: {
size: 16
},
display: true,
text: 'Researchers (n=3)',
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
datalabels: {
display: true,
clamp: true,
formatter: (val, context) => (`${val}%`),
anchor: 'start',
align: 'end',
}
},
responsive: true,
tooltips: {
enabled: false,
},
barThickness: 55,
maintainAspectRatio: false,
scales: {
x: {
display: true,
title: {
font: {
size: 16,
},
display: true,
text: "Scroes (1-9)",
},
grid: {
display: false,
drawBorder: false, //<- set this
},
},
y: {
display: true,
ticks: {
display: false
},
title: {
font: {
size: 16
},
display: true,
text: "% of Respondants",
},
grid: {
color: '#9B9898',
drawBorder: false, //<- set this
},
},
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<canvas id="myNewChartB" width="400" height="400"></canvas>
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>
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,
I'm using chart.js on a project, a canvas on the html.
However, the data i'm inputting there doesn't go along with the label.
The data bars are not following the axes properly. Is there a way to add a padding, to the bar? Or something similar?
I've tried many ways, but can't get it right.
Here is my config:
$(window).on("load", function(){
//Get the context of the Chart canvas element we want to select
var ctx = $("#bar-multi-axis");
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "Ações",
data: [45],
backgroundColor: "#5175E0",
hoverBackgroundColor: "rgba(81,117,224,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}, {
label: "Opções",
data: [28],
backgroundColor: "#16D39A",
hoverBackgroundColor: "rgba(22,211,154,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Termo",
data: [-40],
backgroundColor: "#F98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BM&F",
data: [25],
backgroundColor: "#F00E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Garantias",
data: [-16],
backgroundColor: "#E12E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Tesouro Direto",
data: [10],
backgroundColor: "#E98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Financeiro",
data: [-12],
backgroundColor: "#F98A76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "BTC",
data: [50],
backgroundColor: "#F18E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Renda Fixa",
data: [24],
backgroundColor: "#D98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
},
{
label: "Clubes e fundos",
data: [-24],
backgroundColor: "#A98E76",
hoverBackgroundColor: "rgba(249,142,118,.8)",
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
// Chart Options
options : chartOptions,
data : chartData
};
// Create the chart
var lineChart = new Chart(ctx, config);
});
I suggest to use only one dataset and define specific color for each bar using an array asbackgroundColor property:
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
Check my fiddle: https://jsfiddle.net/beaver71/2hp160zh/
// Chart Options
var chartOptions = {
responsive: true,
maintainAspectRatio: false,
responsiveAnimationDuration:500,
hoverMode: 'label',
stacked: false,
legend: {display:false,},
title:{
display:false,
text:"Chart.js Bar Chart - Multi Axis"
},
scales: {
xAxes: [{
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: true,
position: "bottom",
id: "x-axis-1",
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: true,
}
}, {
type: "linear", // only linear but allow scale type registration. This allows extensions to exist solely for log scale for instance
display: false,
position: "bottom",
id: "x-axis-2",
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
display: true,
type: 'category',
gridLines: {
color: "#f3f3f3",
drawTicks: true,
},
scaleLabel: {
display: false,
}
}]
}
};
// Chart Data
var chartData = {
labels: ["Ações", "Opções", "Termo", "BM&F", "Garantias","Tesouro Direto","Financeiro","BTC","Renda Fixa","Clubes e fundos"],
datasets: [{
label: "my set",
data: [45, 28, -40, 25, -16, 10, -12, 50, 24, -24],
backgroundColor: ["rgba(255, 99, 132, 0.6)", "rgba(255, 159, 64, 0.6)", "rgba(255, 205, 86, 0.6)", "rgba(75, 192, 192, 0.6)", "rgba(54, 162, 235, 0.6)", "rgba(153, 102, 255, 0.6)", "rgba(201, 203, 207, 0.6)", "rgba(155, 99, 132, 0.6)","rgba(255, 99, 32, 0.6)"],
borderColor: "transparent",
xAxisID: "x-axis-1",
}]
};
var config = {
type: 'horizontalBar',
options : chartOptions,
data : chartData
};
var lineChart = new Chart('myChart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="600"></canvas>
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();