Chart.js – Title
”; Previous Next
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 −
Print Page
Previous
Next
Advertisements ”;