I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app. I want to change the chart tooltip font family. Here is the options i am using in the chart. I am unable to apply font family to the line chart. i want to apply a custom font for the title in the tooltip. i have used props mentioned in the documentation of chart js
const options = {
animation,
plugins: {
tooltip: {
backgroundColor: "#fff",
displayColors: false,
borderColor: "#8b7a7a",
borderWidth: 0.5,
bodyColor: "#0000",
titleColor: "#8b7a7a",
// bodyFontColor: "#8b7a7a",
padding: 10,
footerSpacing: 0,
boxHeight: 10,
title: {
font: {
size: 50,
family: "'Work Sans',sans-serif",
},
},
callbacks: {
title: function (t, d) {
let datae = moment(t[0].label).format("MMM DD, YYYY");
const aa = t[0].dataset.label;
const val = t[0].formattedValue;
return `Date: ${datae.toString()}\n${aa}: ${val}`;
},
},
},
legend: {
display: false,
},
},
elements: {
line: {
tension: 0,
},
},
legend: {
display: false,
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},
};
As can be read here you need to configure the font for the tooltip title in the titleFont property and not in the title.font property:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
tooltip: {
titleFont: {
family: 'commic-sans-ms'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>