I would like to customize a Chart.js chart title using / injecting HTML & CSS. From the documentation, it seems pretty clear you can do just that, but but the docs do not give an example of how this is done:
I have tried using an inline <span> tag to color one specific word in the title, leaving the other words the default font color. But this approach does not work, as it renders the title with the markup itself instead of styling the word "blue" with a blue font color. Note that all the CSS (including the styling I want to apply in the chart title) is inside a <style> tag in the <head>.
Here is a fully working example using starter code from the (un?)official Chart.js YouTube channel.
I am using Chart.js v4.4.1. Can anyone provide a working example of how you can use HTML / CSS to further customize the chart title?
const data = {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [{
label: "Weekly Sales",
data: [18, 12, 6, 9, 12, 3, 9],
backgroundColor: [
"rgba(255, 26, 104, 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)",
"rgba(0, 0, 0, 0.2)",
],
borderColor: [
"rgba(255, 26, 104, 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)",
"rgba(0, 0, 0, 1)",
],
borderWidth: 1,
}, ],
};
// config
const config = {
type: "bar",
data,
options: {
plugins: {
legend: {
display: false, // don't show the box above the chart
},
title: {
display: true,
// THIS IS WHAT I WOULD LIKE TO CUSTOMIZE
text: "This is a <span class='blue-word'>blue</span> word",
font: {
weight: 200,
size: 22,
},
},
},
scales: {
x: {
ticks: {
font: {
size: 18,
},
},
},
y: {
beginAtZero: true,
ticks: {
font: {
size: 18,
},
},
},
},
},
};
// render init block
const myChart = new Chart(document.getElementById("myChart"), config);* {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.chartMenu {
width: 100vw;
height: 60px;
background: #1a1a1a;
color: rgba(54, 162, 235, 1);
}
.chartMenu p {
padding: 10px;
font-size: 20px;
}
.chartCard {
width: 100vw;
height: calc(100vh - 40px);
background: rgba(4, 150, 248, 0.776);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 80%;
padding: 20px;
border-radius: 20px;
border: solid 3px rgba(54, 162, 235, 1);
background: white;
}
.blue-word {
color: blue;
}<div class="chartCard">
<div class="chartBox">
<canvas id="myChart"></canvas>
</div>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>