chart.js My DATA doesn't go along with the label, - javascript

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>

Related

How to remove Label from charts.js

I am using charts.js to create a charts for my website.
I am unable the remove the legend from the chart.
I did not found the solution. This is the first time I am using charts.js library.
code:
const ctx1 = document.getElementById('yearWise').getContext('2d');
const yearWise = new Chart(ctx1, {
type: 'bar',
plugins: [ChartDataLabels],
data: {
legend: 'options',
labels: ['2018-19','2019-20','2020-21','2021-22'],
datasets: [{
data: [90,400,5245,5122],
backgroundColor: [
// 'rgba(255, 99, 132, 0.5)',
'rgba(70, 132, 238, 0.5)',
],
borderColor: [
// 'rgba(255, 99, 132, 1)',
'rgba(70, 132, 238, 1)',
],
borderWidth: 1
}]
},
options: {
legend: {
display: false,
},
responsive: true,
scales: {
y: {
beginAtZero: true,
}
},
plugins: {
title: {
display: true,
text: 'Programs Conducted - Year Wise',
},
datalabels: {
anchor: 'end',
align: 'end',
labels: {
value: {
color: 'rgba(70, 132, 238, 1)'
}
}
},
},
}
});
Thanks in advance.
Here is the documentation
https://www.chartjs.org/docs/latest/configuration/legend.html
you can simply set legend.display to false.
options: {
plugin: {
legend: {
display: false,
}
}
}
You can try it here
https://codesandbox.io/s/wonj2xn23w?file=/src/index.js

remove data display in middle of the bar's and every graph from graphs in chart js

I'm using Chart.js v2.9.3 in sails js
my question is how should I remove the values display in the middle of the bars
config for chat is below
var ChartConfig = {
type: "line",
data: {
labels: [],
datasets: [{
label: "Earnings",
lineTension: 0.3,
backgroundColor: "rgba(0, 97, 242, 0.05)",
borderColor: "rgba(0, 97, 242, 1)",
pointRadius: 3,
pointBackgroundColor: "rgba(0, 97, 242, 1)",
pointBorderColor: "rgba(0, 97, 242, 1)",
pointHoverRadius: 3,
pointHoverBackgroundColor: "rgba(0, 97, 242, 1)",
pointHoverBorderColor: "rgba(0, 97, 242, 1)",
pointHitRadius: 10,
pointBorderWidth: 2,
data: []
}]
},
options: {
maintainAspectRatio: false,
barValueSpacing: 20,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
barThickness: barThickness,
gridLines: {
display: false,
drawBorder: false
},
ticks: {
padding: 10,
// maxTicksLimit: 10
},
stacked: true,
}],
yAxes: [{
ticks: {
maxTicksLimit: 10,
padding: 10,
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
},
stacked: true,
}]
},
legend: {
display: true,
labels: {
filter: function (item, chart) {
// Logic to remove a particular legend item goes here
return !item.text.includes('Emp_Id') && !item.text.includes('Rel_Id')
}
}
},
tooltips: {
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
titleMarginBottom: 10,
titleFontColor: "#6e707e",
titleFontSize: 14,
borderColor: "#dddfeb",
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
intersect: false,
mode: "index",
caretPadding: 10,
},
plugins: {
colorschemes: {
scheme: ThemeVariable
},
},
}
}
also dous not add anything other then this in any place.
the value with a simple bar graph is ok but with stacked bars and pie and doughnut its looks dirty.
I've attached the screenshot of the graph.graph's spanshot
can anyone help me with this
thank you

How to hide tooltip for selected datasets? - Chart.js v2.8

I have this graph with four datasets. Two that shows count of values and two lines that represent a goal or target for each value. What I want is to group all tooltips while hovering but exclude the two tooltips for the goal lines. How does one do that?
The following code shows some mockup numbers for the data, and the tooltip shows me all the labels.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
I have tried various methods, some that works half way (excludes only one dataset) or with too much extra code and 'blinking' or flickering tooltips while disappearing.
While working on the question I stumbled up on this solution using filter. It is based on a answer to simular question.
filter: function (tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1")||(label == "Goal 2")) {
return false;
} else {
return true;
}
}
Here is the code from my original question including this filter.
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 1',
data: [48.000, 47.040, 46.080, 45.120, 44.160, 43.200],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
fillColor: 'transparent',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Goal 2',
data: [24.000, 23.520, 23.040, 22.560, 22.080, 21.600],
backgroundColor: 'transparent',
borderColor: 'rgba(0, 255, 0, 1)',
pointBorderColor: 'transparent',
pointRadius: 0,
borderWidth: 0.4,
lineTension: 0
}
]
},
options: {
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
filter: function(tooltipItems, data) {
var label = data.datasets[tooltipItems.datasetIndex].label;
if ((label == "Goal 1") || (label == "Goal 2")) {
return false;
} else {
return true;
}
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart"></canvas>
Final version (I hope). Shortly after my answer I stumbled upon this plugin which is exactly what I really was looking for.
https://github.com/chartjs/chartjs-plugin-annotation
var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June"],
datasets: [{
label: 'Count type 1',
data: [48, 33, 32, 35, 42, 38],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 204, 0, 1)',
fillColor: 'rgba(255, 204, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 204, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
},
{
label: 'Count type 2',
data: [24, 37, 30, 22, 29, 18],
backgroundColor: 'transparent',
borderColor: 'rgba(255, 0, 0, 1)',
fillColor: 'rgba(255, 0, 0, 0.1)',
pointBorderColor: 'transparent',
pointBackgroundColor: 'rgba(255, 0, 0, 1)',
pointRadius: 4,
borderWidth: 2,
lineTension: 0.3
}
]
},
options: {
responsive: true,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-1',
scaleID: 'y-axis-0',
value: 48,
endValue: 43,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,204,0, 0.4)',
fontColor: 'rgba(0, 0, 0, 0.6 )',
fontSize: 12,
enabled: true,
content: 'Goal from 48 to 43',
yAdjust: -18,
xAdjust: 0,
}
},
{
type: 'line',
mode: 'horizontal',
drawTime: 'afterDatasetsDraw',
id: 'a-line-2',
scaleID: 'y-axis-0',
value: 24,
endValue: 21,
borderColor: 'rgb(75, 192, 192)',
borderWidth: 2,
label: {
backgroundColor: 'rgba(255,0,0,0.4)',
fontColor: 'rgba(255, 255, 255 )',
fontSize: 12,
enabled: true,
content: 'Goal from 24 to 21',
yAdjust: 14,
xAdjust: 0,
}
}]
},
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'interface'
},
ticks: {
beginAtZero: true
}
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://rawgit.com/chartjs/chartjs-plugin-annotation/master/chartjs-plugin-annotation.js"></script>
<canvas id="myChart"></canvas>

ChartJS: Set which data to display when chart loads and save (remember) it

I'm using http://www.chartjs.org/ library for charts where I try to display 6 different data points on Y axis.
It's a bit mess when everything is displayed at the same time, but I do not want to split it into multiple charts as all these data correlate.
I wonder if it's possible to set which data should be hidden when the chart loads and then I could show the remaining ones myself.
Also is it possible to save these settings somehow? Let's say I want to display only 3 types of data and after I reload the page it would remember my preference.
EDIT: Here is the current code if it helps..
<canvas id="statsByDayChart" width="400" height="300"></canvas>
<script>
var ctx = document.getElementById('statsByDayChart').getContext('2d');
var profit = {
label: "Profit",
data: {!! json_encode($profit) !!},
borderColor: 'rgba(73, 189, 138, 1)',
borderWidth: 3,
backgroundColor: 'rgba(219, 242, 232, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-profit',
type: 'line'
};
var cost = {
label: "Cost",
data: {!! json_encode($cost) !!},
borderColor: 'rgba(255, 0, 0, 1)',
borderWidth: 2,
backgroundColor: 'rgba(255, 0, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-cost',
type: 'line'
};
var ctr = {
label: "CTR",
data: {!! json_encode($ctr) !!},
borderColor: 'rgba(255, 126, 0, 1)',
borderWidth: 3,
backgroundColor: 'rgba(255, 126, 0, 0)',
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-ctr',
type: 'line'
};
var holds = {
label: "Holds",
data: {!! json_encode($holds) !!},
borderColor: 'rgb(175, 26, 245, 1)',
backgroundColor: 'rgb(175, 26, 245, 1)',
borderWidth: 4,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-holds',
type: 'bar',
fill: true
};
var conversions = {
label: "Conversions",
data: {!! json_encode($conversions) !!},
borderColor: 'rgb(54, 162, 235, 1)',
backgroundColor: 'rgb(54, 162, 235, 1)',
borderWidth: 5,
pointBorderWidth: 4,
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-conversions',
type: 'bar',
fill: true
};
var impressions = {
label: "Impressions",
data: {!! json_encode($displays) !!},
borderColor: 'rgba(254, 206, 96, 1)',
backgroundColor: 'rgba(255, 231, 175, 0.8)',
borderWidth: 6,
pointBorderWidth: 4,
borderDash: [20, 6],
pointBackgroundColor: '#128ffb',
yAxisID: 'y-axis-impressions',
type: 'line',
fill: true
};
var chartData = {
labels: {!! json_encode($days) !!},
datasets: [profit, cost, ctr, holds, conversions, impressions]
};
var lineChart = new Chart(ctx, {
type: 'bar',
data: chartData,
options: {
legend: {display: true},
responsive: true,
maintainAspectRatio: false,
elements: { line: { tension: 0.05 } },
scales: {
xAxes: [{ gridLines: { display: true, offsetGridLines: false }, barPercentage: 1, categoryPercentage: 0.4 }],
yAxes: [
{
id: 'y-axis-profit',
type: 'linear',
gridLines: { display: true },
ticks: { beginAtZero: true, min: {{ $profit->min() }}, max: {{ $profit->max() }} },
display: true
},
{
id: 'y-axis-cost',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $cost->min() }}, max: {{ $cost->max() }} },
display: false
},
{
id: 'y-axis-ctr',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $ctr->min() }}, max: {{ $ctr->max() }} },
display: false
},
{
id: 'y-axis-holds',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $holds->min() }}, max: {{ $holds->max() }} },
display: false,
},
{
id: 'y-axis-conversions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $conversions->min() }}, max: {{ $conversions->max() }} },
display: false,
},
{
id: 'y-axis-impressions',
type: 'linear',
gridLines: { display: false },
ticks: { beginAtZero: true, min: {{ $displays->min() }}, max: {{ $displays->max() }} },
display: false
}
]
},
tooltips: { mode: 'index', intersect: false },
hover: { mode: 'nearest', intersect: true },
}
});
</script>

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();

Categories