”;
Chart.js library provides us various format with the help of which we can easily supply the colors to the chart or graph options. You can specify the color as string in the following notations −
- Hexadecimal
- RGB
- HSL
Chart.js will use the global default color, if you haven’t specified any color and if the chart needed color. The following table provides the 3 color options that are stored in “Chart.defaults” −
| Name | Type | Default | Description |
|---|---|---|---|
| backgroundColor | Color | rgba(0, 0, 0, 0.1) | Background color |
| borderColor | Color | rgba(0, 0, 0, 0.1) | Border color |
| Color | Color | #666 | Font color |
Example
Let’s take an example in which we will set the color in our chart −
<!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: [''yellow'', ''aqua'', ''pink'', ''lightgreen'', ''lightblue'', ''gold''],
borderColor: [''red'', ''blue'', ''fuchsia'', ''green'', ''navy'', ''black''],
borderWidth: 2,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>
Output
This HTML code will produce the following chart having graph elements with different colors −
Advertisements
”;