Chart.js Canvas background Configuration

Last Updated : 08 Dec, 2023

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:

Output1

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:

Output2

Suggest improvement

Chart.js Animations Configuration

Chart.js Data Decimation Configuration

Share your thoughts in the comments

Chart.js General

Chart.js Configuration

Chart.js Chart Types

Chart.js Axes

Chart.js Developers

Chart.js Canvas background Configuration

Syntax:

CDN link:

HTML

Output:

HTML

Output:

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?