”;
Chart.js title defines which text is going to be seen at the top of our chart or graph. The namespace for Title configuration is options.plugins.title whereas the global option for the chart title is defined in Chart.defaults.plugins.title.
The table below gives the descriptions of various kinds of configuration options we can use with chart title −
| Name | Type | Default | Description |
|---|---|---|---|
| align | string | ”center” | As name implies, with this configuration you can set the alignment of the title. |
| color | Color | Chart.defaults.color | It will define the color of text. |
| display | Boolean | false | If true, it will show the title, else NOT. |
| fullSize | Boolean | true | As name implies, if true, the box will take the full width/height of the canvas. |
| position | string | ”top” | It is used to set the position of the title. The default is top position. |
| font | Font | {weight: ”bold”} | You can use various fonts. The options are in “Chart.defaults.font”. |
| padding | Padding | 10 | It is use for padding to be applied around the title. |
| text | string|string[] | ”” | As name implies, it is use for the title text to display. |
Syntax
The Chart Title syntax is given below −
title: {
display: true,
text: ''write heading here'',
color: ''navy'',
position: ''bottom'',
}
The title enabled property must be true to display the data label. If it is set to false, then the title becomes deactivated.
Example
Let’s take an example in which we will be using various Title configurations −
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body>
<canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script>
var chrt = document.getElementById("chartId").getContext("2d");
var chartId = new Chart(chrt, {
type: ''bar'',
data: {
labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
datasets: [{
label: "online tutorial subjects",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: [''coral'', ''aqua'', ''pink'', ''lightgreen'', ''lightblue'', ''crimson''],
borderColor: [''red'', ''blue'', ''fuchsia'', ''green'', ''navy'', ''black''],
borderWidth: 2,
}],
},
options: {
responsive: false,
plugins: {
title: {
display: true,
text: ''Web Application Technologies'',
color: ''navy'',
position: ''bottom'',
align: ''center'',
font: {
weight: ''bold''
},
padding: 8,
fullSize: true,
}
}
},
});
</script>
</body>
</html>
Output
The following output chart shows the various Title configurations −
Advertisements
”;