Chart.js Canvas background Configuration

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.

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.

Output: