Menu
I have this chart working in chart.js and it pulls the data in from a csv file. I'm happy with where I've gotten so far but I still can't seem to affect the styling in certain ways. I am using chart.js old version 2.9.3
I am using the datalabel plugin to add the values to the bars on the chart but how do I style the font for the values? I want to colour them and make them display outside the area of the bars. I keep trying to put the style tags in different areas but nothing seems to work. I am using red for testing purposes in my code. I also tried a javascript function called formatter but that doesn't seem to do anything either. Maybe I have my variable names wrong?
I also want to get rid of the numbers along the bottom but tick: {display: false} does not seem to work.
Sorry I am such a newbie at code and feel so frustrated. Any help would be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Project 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/1.0.0/chartjs-plugin-datalabels.min.js" integrity="sha512-XulchVN83YTvsOaBGjLeApZuasKd8F4ZZ28/aMHevKjzrrjG0lor+T4VU248fWYMNki3Eimk+uwdlQS+uZmu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<div class="wrapper">
<h1>MY CHART HERE</h1>
<h2>Results of a survey </h2>
<canvas id="myChart" width="350" height="250" style="background-color:white;"></canvas>
</div>
<script>
window.addEventListener('load', setup);
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var poll = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: poll.years,
datasets: [{
label: 'how many people (%)',
data: poll.vals,
backgroundColor: [
'#cd0000',
'#eb7d44',
'#70AA5B',
'#CAF0FD',
'#134D85',
],
}]
},
options: {
scaleShowLabels: false,
plugins: {
datalabels: {
align: 'end',
color: 'red',
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
}
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15
}
},
scales: {
yAxes: [{
ticks: {
display: false,
color: '#ffffff',
zeroLineColor: '#ffffff'
}
}],
xAxes: [{
ticks: {
display: false
},
}],
}
},
plugins: [ChartDataLabels],
options: {
datalabels: {
color: 'red',
align: 'end'
}
},
});
}
async function getData() {
// const response = await fetch('testdata.csv');
var response = await fetch('data/test2.csv');
var data = await response.text();
data = data.replace(/"/g, "");
var years = [];
var vals = [];
var rows = data.split('\n').slice(1);
rows = rows.slice(0, rows.length - 1);
rows = rows.filter(row => row.length !== 0)
rows.forEach(row => {
var cols = row.split(",");
years.push(cols[0]);
vals.push(0 + parseFloat(cols[2]));
});
console.log(years, vals);
return {
years,
vals
};
}
</script>
</body>
</html>
Image of chart:
241
asked Mar 27 '26 20:03
Found your issue, you are defining the options block a second time after your plugins section, this overrides the earlyer options block as there are no duplicate keys allowed in js objects, so if you change your config to this it will work:
async function setup() {
var ctx = document.getElementById('myChart').getContext('2d');
var poll = await getData();
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: poll.years,
datasets: [{
label: 'how many people (%)',
data: poll.vals,
backgroundColor: [
'#cd0000',
'#eb7d44',
'#70AA5B',
'#CAF0FD',
'#134D85',
],
}]
},
options: {
scaleShowLabels: false,
plugins: {
datalabels: {
align: 'end',
color: 'red',
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 8,
bottom: 0
}
},
responsive: true,
title: {
display: false
},
legend: {
display: true,
position: 'top',
usePointStyle: true,
padding: 1,
labels: {
boxWidth: 15
}
},
scales: {
yAxes: [{
ticks: {
display: false,
fontColor: '#ffffff',
zeroLineColor: '#ffffff'
}
}],
xAxes: [{
ticks: {
display: false
},
}],
}
},
plugins: [ChartDataLabels],
});
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
