Chart.js Canvas background Configuration

Last Updated : 23 Jul, 2024

Chart.js Canvas Background Configuration consists of setting options to control the visual appearance of the chart area. We can implement the custom plugin through which we can provide the color or the image as the background for the Canvas area.

Syntax:

// Syntax for a basic Chart.js background plugin
Chart.plugins.register({
      beforeDraw: function(chart) {
       // Your background drawing logic here
      // Use chart.ctx for canvas context operations
  }
});

CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js"></script>

Example 1: In the below example, we have created a bar chart with data related to GeeksforGeeks Programming Languages. We have used the custom plugin "backgroundColorPlugin" which is used to set the background canvas color.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, 
					initial-scale=1.0">
	<title>Bar Chart with Custom Background Color</title>
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
	</script>
</head>

<body>
	<div>
		<h1 style="color:green;">
			GeeksforGeeks
		</h1>
		<h3>
			Chart.js Canvas background 
			Configuration - Color
		</h3>
		<div>
			<canvas id="barChart" width="400"
					height="400">
			</canvas>
		</div>
	</div>
	<script>
		const data = {
			labels: ['Java', 'Python', 'C++', 
					'JavaScript', 'C#', 'PHP'],
			datasets: [{
				label: 'Programming Languages',
				data: [1, 2, 3, 4, 5, 6],
				backgroundColor: [
					'rgba(255, 99, 132, 0.5)',
					'rgba(54, 162, 235, 0.5)',
					'rgba(255, 205, 86, 0.5)',
					'rgba(75, 192, 192, 0.5)',
					'rgba(153, 102, 255, 0.5)',
					'rgba(255, 159, 64, 0.5)'
				],
				borderColor: [
					'rgba(255, 99, 132, 1)',
					'rgba(54, 162, 235, 1)',
					'rgba(255, 205, 86, 1)',
					'rgba(75, 192, 192, 1)',
					'rgba(153, 102, 255, 1)',
					'rgba(255, 159, 64, 1)'
				],
				borderWidth: 1
			}]
		};
		const backgroundColorPlugin = {
			id: 'customCanvasBackgroundColor',
			beforeDraw: (chart) => {
				const ctx = chart.ctx;
				ctx.fillStyle = 'rgba(220, 220, 0, 0.5)';
				ctx.fillRect(0, 0, chart.width, chart.height);
			}
		};
		const config = {
			type: 'bar',
			data: data,
			plugins: [backgroundColorPlugin],
			options: {
				scales: {
					y: {
						beginAtZero: true
					}
				}
			}
		};
		let ctx = document.getElementById('barChart')
						.getContext('2d');
		let myBarChart = new Chart(ctx, config);
	</script>
</body>

</html>

Output:

Example 2: In the below example, we have used the Doughnut chart to represent the Data related to GeeksforGeeks. We have created a custom plugin named as 'custom CanvasBackgroundImage' which uses the background image as the GeeksforGeeks logo applied to Canvas.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0">
	<title>Doughnut Chart with Custom Background Image</title>
	<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js">
	</script>
	<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.1.2/chart.umd.js">
	</script>
</head>

<body>
	<div>
		<h1 style="color:green;">
			GeeksforGeeks
		</h1>
		<h3>
			Chart.js Canvas background 
			Configuration - Image
		</h3>
		<div>
			<canvas id="doughnutChart" width="700"
					height="250">
			</canvas>
		</div>
	</div>
	<script>
		const data = {
			labels: ['Java', 'Python', 'JavaScript'],
			datasets: [{
				label: 'Programming Languages',
				data: [300, 50, 100],
				backgroundColor: ['rgb(255, 99, 132)', 
								'rgb(54, 162, 235)', 
								'rgb(255, 205, 86)'],
				hoverOffset: 4
			}]
		};
		const image = new Image();
		image.src = 
'https://media.geeksforgeeks.org/wp-content/uploads/20230816191453/gfglogo.png';
		image.width = 250;
		const plugin = {
			id: 'customCanvasBackgroundImage',
			beforeDraw: (chart) => {
				if (image.complete) {
					const ctx = chart.ctx;
					const { top, left, width, height } = chart.chartArea;
					const x = left + width / 2 - image.width / 2;
					const y = top + height / 2 - image.height / 2;
					ctx.drawImage(image, x, y, image.width, image.height);
				} else {
					image.onload = () => chart.draw();
				}
			}
		};
		const config = {
			type: 'doughnut',
			data: data,
			plugins: [plugin]
		};
		const ctx = document.getElementById('doughnutChart')
							.getContext('2d');
		const myDoughnutChart = new Chart(ctx, config);
	</script>
</body>

</html>

Output:

Chart.js Data Decimation Configuration

gauravggeeksforgeeks

Improve

Article Tags :

Chart.js Canvas background Configuration

Syntax:

CDN link:

Output:

Output:

Similar Reads

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Questions

Thank You!

What kind of Experience do you want to share?