chart.js-datalabels-plugins don't work - javascript

I'm trying to use chartjs-datalabels-plugin to show values on the chart. but I can't make it work on jsfiddle
Here's my code
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>
I import chartjs-datalabels-plugin in jsfiddle and then in options I enable the display option to true. but no value is shown in the chart.
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
....
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: true,
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});

Datalabels plugin requires Chart.js 2.7.0 or later.
In your fiddle you used 2.4.0 version.
var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
height: 200,
labels: ["Red"],
datasets: [{
label: '# of Votes',
data: [12],
backgroundColor: [
'#F4B266',
'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)'
],
borderWidth: 1
},
{
label: '# of Votes',
data: [18],
backgroundColor: [
'#AEB7B2',
'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)'
],
borderWidth: 1
}
]
},
maintainAspectRatio: false,
options: {
plugins: {
datalabels: {
color: 'black',
display: function(context) {
return context.dataset.data[context.dataIndex] > 15;
},
font: {
weight: 'bold'
},
formatter: Math.round
}
},
legend: {
display: false
},
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
},
barThickness: 9
}],
xAxes: [{
stacked: true,
gridLines: {
display: false,
drawBorder: false,
},
ticks: {
beginAtZero: true,
suggestedMax: 100,
display: false
},
barThickness: 9
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
<div class="chart-legend">
</div>
<div class="chart">
<canvas id="myChart" height = 60></canvas>
</div>
</div>

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

Chart.js bar thickness

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>

Chart.js with dual axis incorrect starting points (if negative values)

I have a chart.js chart in my app. This is how it looks without negative values:
With negative values:
As you can see I have dual axisY. They work as needed if there are no negative values. But if there are some, right AxisY starts in the incorrect position.
How to make it starts in the same place as left AxisY?
Here is my code:
private buildOptions(): any {
return {
responsive: true,
title: {
display: false,
text: ''
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff'
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff'
}]
},
legend: {
display: true,
labels: {
fontColor: '#fff'
}
}
};
}
Thank you.
Have you tried setting the same min value for both axes?
You can use ticks for specifying it:
ticks: {
min: -5
}
Here's an example snippet I made for you:
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, -5, 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: {
scales: {
yAxes: [{
position: "left",
id: "y-axis-0",
fontColor: '#fff',
ticks: {
min: -5
}
}, {
position: "right",
id: "y-axis-1",
fontColor: '#fff',
ticks: {
min: -5
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:50%;">
<canvas id="myChart" width="400" height="400"></canvas>
</div>

ChartJS beginAtZero, min, max doesn't work

I tried every possible way, every form-answer but anything works inmy code. I want yAxes begin at zero and max value is 100 but all my chart begin with other values (see pic). What can I do?
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
key is to pass options in the Chart constructor instead of part of data
new Chart(ctx, {
type: 'bar',
data: {{ chart_data|safe }},
options: {
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true
}
}]
}
}
});
above works for me!
#Nikolas,
Here is the fiddle where the parameters you set works well.
https://jsfiddle.net/shemdani/zkb215up/2/
var options = {
responsive: true,
scales: {
yAxes: [{
display: true,
ticks: {
beginAtZero: true,
max: 100,
min: 0
}
}]
},
title: {
display: true,
text: name
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
};
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [32, 59, 36, 25, 68, 71],
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
}]
}
var ctx = document.getElementById("myChart");
var chartInstance = new Chart(ctx, {
type: 'line',
data: data,
options:options
});
Please check and see what you are doing wrong. I used the basic data from charjs documentation.
Working for version 3.2.0:
var options = {
// plugins, responsive etc...
scales: {
y: {
min: 0
}
},
//tooltips specifications...
}
The y-axis will start at 0:
I tried different solutions and adding barThickness: 25 in options worked for me.

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