Develop Reference

Chart JS : Display the percentage of labels without getContext('2d')

I'm using the library chartJs to display the data that i get from my MySQL database.
In the fucntion below, AddValuesToNavigatorChart takes the browsers data and the percentage data and displays them on the pie chart.
What i need to know, is how to add '%' in my labels ?
I found few answer with getContent('2d').. using the old way, but it's not working.
This is the function :
function AddValuesToNavigatorChart(browsers, percentage) {
checkNavigatorChart()
const data = {
labels: browsers,
datasets: [{
data: percentage,
backgroundColor: [
'rgb(192,192,192)',
'rgb(255,0,0)',
'rgb(0,0,0)',
'rgb(105,105,105)'
],
hoverOffset: 4
}]
};
const config = {
tooltips: {
enabled: false
},
type: 'pie',
data: data,
plugins: [ChartDataLabels],
options: {
showTooltips: false,
plugins: {
datalabels: {
color: 'rgb(255,255,255)',
borderWidth: '2',
align: 'top'
},
legend: {
position: 'bottom',
align: 'center',
labels: {
boxWidth: 12,
padding: 15,
usePointStyle: true,
pointStyle: 'circle'
}
},
title: {
text: 'Navigator Chart',
display: true,
color: 'rgb(0,0,0)',
position: 'top'
}
}
}
};
const NavigatorChart = new Chart(
document.getElementById('NavigatorChart'),
config
);
}

Please provide the version of chartjs that you are using.
Did you mean you want to show the % in the label of the tooltip?
For version v3.8.0, here is a working code I have just made, Link
As in option, you can edit the label of tooltip as you want:
options: {
plugins: {
tooltip: {
callbacks: {
label: (tooltipItem) => {
//tooltipItem is for the slice of the pie you are hovering now
return ' ' + tooltipItem.parsed + '%';
},
}
}
}
}

Styling problems with Chart.Js

How can I add these styles to my graph? I'm having trouble finding it in the documentation for it, and the other forums aren't very helpful. I am using Flask for the backend, so that's why the data values look like that.
Labels on top of bars
Change font size on both axis
Set y scale as a fixed value (0,8)
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var options = {
scales: {
yAxes: [{
ticks: {
fontSize: 40
}
}]
}
}
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Lithium Battery', 'Other Mfg', 'Delivery', 'Tailpipe', 'Fuel Cycle', 'Disposal', 'Total'],
datasets: [{
label: 'ICEV CAR (MTCO2e/Year)',
labels: [
"{{data['battery_icev_car']}}",
"{{data['other_mfg_icev_car']}}",
"{{data['delivery_icev_car']}}",
"{{data['tailpipe_icev_car']}}",
"{{data['fuel_cycle_icev_car']}}",
"{{data['disposal_icev_car']}}",
"{{data['total_icev_car']}}"
],
data: [ /* errors are normal, fixes when server ru
[0, {{data['y1_icev']}}],
[{{data['y1_icev']}}, {{data['y2_icev']}}],
[{{data['y2_icev']}}, {{data['y3_icev']}}],
[{{data['y3_icev']}}, {{data['y4_icev']}}],
[{{data['y4_icev']}}, {{data['y5_icev']}}],
[{{data['y5_icev']}}, {{data['y6_icev']}}],
[0, {{data['y6_icev']}}]
],
backgroundColor: [
'rgba(0,0,0,0.9)'
],
borderColor: [
'rgba(0,0,0,1)'
],
borderWidth: 1,
borderSkipped: false
}]
},
options: {
responsive: true,
plugins: {
legend: {
labels: {
// This doesn't work on axis
font: {
size: 20
}
}
}
},
y: {
beginAtZero: true
}
}
});
</script> </script>

Since your config is not working I assume you are using V3, in which case the solution is as followed:
For point one you need to use an external plugin, you can write your own or use the datalabels plugin
For your second problem you need to style it as a font object as told in the documentation like so:
options: {
scales: {
y:{
ticks:{
font:{
size: 50
}
}
}
}
}
For your last part you can set the stepSize to 0.8

Chart.js - change which data the legend uses for the coloured box

I have a bar chart that always shows 4 bars. The bars are coloured dynamically. It looks like the coloured box takes its colour from the first data. I would like to use the colour from the 4th (last) data value. Maybe the options:plugins:legend:label:sort function helps but I don't understand what it does.
options
const options = {
scales: {
x: {
grid: {
display: false,
color: 'rgba(0,0,0)'
}
},
y: {
display: false,
min: 0,
max: 4
},
},
plugins: {
legend: {
position: 'bottom'
}
}
}
So I don't know if I can change the data that the box color comes from, or if there is a config option somewhere where I can change it manually.

You can use the generateLabels function as described here.
Please take a look at below runnable sample code and see how it works.
new Chart('myChart', {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
label: 'My Dataset',
data: [300, 50, 100],
backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
}]
},
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color
}];
}
}
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="myChart" height="180"></canvas>

Following up with #uminder's answer, if you want to keep the hide/show chart and the line-through style after clicking on the legend, you can add the following line:
options: {
responsive: false,
plugins: {
legend: {
labels: {
generateLabels: chart => {
let ds = chart.data.datasets[0];
let color = ds.backgroundColor[ds.backgroundColor.length - 1];
return [{
datasetIndex: 0,
text: ds.label,
fillStyle: color,
strokeStyle: color,
+ hidden: !chart.isDatasetVisible(0)
}];
}
}
}
}
}

Charts.js : How to remove the Vertical Black lines in Bar Chart

How can I remove the vertical black lines, which are getting displayed both sides of bars in the bar chart?
I tried both
options : {
scaleShowVerticalLines: false
}
options : {
scales : {
xAxes : [ {
gridLines : {
display : false
}
} ]
}
}
here is my code lines:
//Chart Axis's
let scales = {
xAxes: [{
gridLines: { display: false },
ticks: {
font: {
size: config.size,
},
color: "white",
},
}],
yAxes: [{
ticks: {
beginAtZero:true
},
}]
};
let ctx = document.getElementById('how_i_spend_canvas');
if (ctx) { // DOM element is present and not null
let categoriesChart = new Chart(ctx.getContext('2d'), {
type: 'bar',
data: howISpendChartdata,
// Chart pulgins & Options
plugins: [ChartDataLabels],
options: {
scales: scales,
responsive: true,
maintainAspectRatio: false,
aspectRatio: 2,
plugins: plugins,
}
}
onClick: function (evt, element) {}
but iy didn't work for me.
Reference where the arrow is pointing the lines.

Got the Answer now as in Chart JS 3 they have changed to grid instead of the common gridlines command.
Now in chart JS 3 can use :
x: {
grid:{
color:'red',
display: false,
}
},
y:{
ticks: {
beginAtZero: true
},
grid: {
color: 'green',
display: true,
}
}
Result ScreenShot

Remove "label" in chart.js

I'm using Chart.js v2.7.2 and want to remove the "label" field. Leaving it off returns "undefined" and the various options I've tried have done nothing. Anyone have new insight on this? Legend, title, etc all fail to remove it.
let thisChart = new Chart(gov_chart, {
type: 'horizontalBar',
data: {
label: 'I want to remove this',
labels: [data1, data2],
datasets: [{
backgroundColor: ['rgb(240,61,74)', 'rgb(0, 156, 255)'],
data: [data1.count, data2.count],
}]
},
options: {
scales: {
xAxes: [{
ticks: {
beginAtZero: true
}
}]
}
},
legend: {
display: false
},
title: {
display: false
},
tooltips: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.yLabel;
}
}
}
});

Note, the accepted answer is outdated for 3.x. To remove the legend you now have to specify the plugin. https://www.chartjs.org/docs/latest/configuration/legend.html
eg
var chart = new Chart(ctx, {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: false
}
}
}
});

The label should be inside datasets such as
type: 'horizontalBar',
data: {
labels: [data1, data2],
datasets: [{
label: 'put it here', // => here
backgroundColor: ['rgb(240,61,74)', 'rgb(0, 156, 255)'],
data: [data1.count, data2.count],
}]
},
so you won't get undefined
Updated:
if you don't want to see it, put legend configuration inside the options. Apparently, I saw that your legend is outside options object.
options: {
legend: {
display: false
}
}

You can use filter to remove out the label you don't want to show
options: {
plugins: {
legend: {
labels: {
filter: (l) => (l.text !== 'Label you want to remove')
}
}
}
}

Update for V4:
If you want to remove x completely with labels, just add this to options:
options: {
scales: {
x: {
display: false
}
}
}