How to Redraw Other Graph in Same <canvas> ?

Last Updated : 26 Feb, 2024

In this article, we will learn how to redraw another graph in the same <canvas>. Redrawing Chart.js graphs in the same <canvas> tag involves destroying the existing graph and creating a new graph with updated or different datasets and options. We can use the destroy() method and a new Chart() instance to destroy the previous chart and redraw a new chart with new datasets.

Chart.js CDN link

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Syntax:

// Create the initial chart
const myChart = new Chart(ctx, {chartParams});

// Destroy the existing chart  
myChart.destroy();  

// Create a new chart with updated data and options  
myChart = new Chart(ctx, {updateChartParams});

Example 1: The following code initially creates the bar graph with example dataset. On clicking the redraw button, it destroys an existing graph and creates a new bar graph with new dataset in the same canvas.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
      Redraw graph example 
    </title> 
    <!-- Include Chart.js library -->
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js"> 
    </script> 
</head> 
  
<body> 
  
    <div style="width: 70%;  
                height: 70%;"> 
        <!--  
            Create a canvas  
            element for the chart 
         -->
        <canvas id="myChart"></canvas> 
    </div> 
    <!--  
        Create a button to 
         redraw the chart  
    -->
    <button onclick="redrawChart()"> 
      Redraw Chart 
    </button> 
  
    <script> 
        // Get the canvas context 
        const ctx = document. 
        getElementById('myChart'). 
        getContext('2d'); 
  
        // Sample data 
        const data = { 
            labels:  
['Label 1', 'Label 2', 'Label 3'], 
            datasets: [{ 
                label: 'Initial Dataset', 
                data: [20, 15, 10], 
                backgroundColor:  
['red', 'green', 'blue'] 
            }] 
        }; 
  
        const newData = { 
            labels:  
['Label 1', 'Label 2', 'Label 3'], 
            datasets: [{ 
                label: 'New Dataset', 
                data: [10, 20, 30], 
                backgroundColor:  
['red', 'green', 'blue'] 
            }] 
        }; 
  
  
  
        // Create the initial chart 
        let myChart = new Chart(ctx, { 
            type: 'bar', 
            data: data, 
        }); 
  
        // Function to redraw the chart 
        function redrawChart() { 
            // Destroy the existing chart 
            myChart.destroy(); 
  
            // Create a new chart with 
            // updated data or options 
            myChart = new Chart(ctx, { 
                type: 'bar', 
                  // Your updated data 
                data: newData,  
            }); 
        } 
    </script> 
  
</body> 
  
</html>

Output:

Redraw other graph in same canvas

Example 2: The following code initially creates the bar graph with given dataset. It destroys an existing graph and creates a new chart with same dataset but different type of chart.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0"> 
    <title> 
      Chart.js Redraw Example 
    </title> 
    <!-- Include Chart.js library -->
    <script src= 
"https://cdn.jsdelivr.net/npm/chart.js"> 
    </script> 
</head> 
  
<body> 
  
    <div style="width: 70%;  
                height: 70%;"> 
        <!--  
            Create a canvas element 
             for the chart  
        -->
        <canvas id="myChart"></canvas> 
    </div> 
  
  
    <!--  
        Create buttons to 
         redraw the chart  
     -->
    <button onclick="redrawBarChart()"> 
      Bar Chart 
      </button> 
    <button onclick="redrawLineChart()"> 
      Line Chart 
      </button> 
  
    <script> 
        // Get the canvas context 
        const ctx = document. 
        getElementById('myChart'). 
        getContext('2d'); 
  
        // Sample data 
        const data = { 
            labels: ['1', '2', '3'], 
            datasets: [{ 
                label: 'Sample dataset', 
                data: [20, 15, 30], 
                backgroundColor:  
            ['red', 'green', 'blue'] 
            }] 
        }; 
  
  
        // Create the initial bar chart 
        let myChart = new Chart(ctx, { 
            type: 'bar', 
            data: data, 
        }); 
  
        // Function to draw bar chart 
        function redrawBarChart() { 
            // Destroy the existing chart 
            myChart.destroy(); 
  
            // Create a new chart with 
            // updated data or options 
            myChart = new Chart(ctx, { 
                type: 'bar', 
                data: data, 
            }); 
        } 
  
        // Function to draw line chart 
        function redrawLineChart() { 
            // Destroy the existing chart 
            myChart.destroy(); 
  
            // Create a new chart with 
            // updated data or options 
            myChart = new Chart(ctx, { 
                type: 'line', 
                data: data, 
            }); 
        } 
  
    </script> 
  
</body> 
  
</html>