Chartjs-ChartJS memory usage

by

0👍

Yes you can do something like that, you can transform the chart to an image and display that, then you can delete your chart which will free up the memory. Downside of this will be that its not interactable anymore:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: 'orange'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        backgroundColor: 'pink'
      }
    ]
  },
  options: {
    animation: false
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chartContainer = document.getElementById('chartJSContainer');
const chartImage = document.getElementById('chartImage');
const chart = new Chart(ctx, options);
const base64Chart = chart.toBase64Image();

// Set image source to chart image
chartImage.src = base64Chart;

// Destroy chart and remove canvas
chart.destroy();
chartContainer.remove();
<body>
  <img id="chartImage">
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

Leave a comment