'Render chartjs and export image to data not in the DOM

I am using chart.js from a frontend react application. I need to create a plot with chart.js so that I can attach it to a powerpoint slide with pptxgen. This image does not have to be rendered visually, I just need to create it when the user requests to generate the ppt.

Chart needs a context, so I created a canvas element to act as such, then tried to render and export the base64 image that I would then proceed to feed into pptxgen:

  let ctx = document.createElement("canvas")
  ctx.setAttribute("width", "400")
  ctx.setAttribute("height", "400")
  let chart: Chart = new Chart(ctx, {
    type: "bar",
    data: {
      datasets: [{
      barPercentage: 0.5,
      barThickness: 6,
      maxBarThickness: 8,
      minBarLength: 2,
      data: [10, 20, 30, 40, 50, 60, 70]
      }]
    },
    options: {
      scales: {}
    }
  } )

  chart.render()
  console.log(chart.toBase64Image())

But all I obtain is "data:;" which looks to be an empty image.

Do you know how to make it render?

javascript chart.js

Solution 1:^[1]

The only way to render a chart without you specifically adding it to the dom is by making use of the offscreen-canvas as explained here in the documentation of chart.js: https://www.chartjs.org/docs/3.7.1/general/performance.html#parallel-rendering-with-web-workers-chromium-only

Downside is that the offscreen canvas API is only available in chromium based browsers.

Other approach you can take is by adding the canvas to the dom, let chart.js render to it, get the base64 representation and then remove the canvas directly after that like so:

let ctx = document.createElement("canvas")
document.documentElement.appendChild(ctx)
ctx.setAttribute("width", "400")
ctx.setAttribute("height", "400")
let chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ['a', 'b', 'c', 'd', 'e', 'f', ' g'],
    datasets: [{
      barPercentage: 0.5,
      barThickness: 6,
      maxBarThickness: 8,
      minBarLength: 2,
      data: [10, 20, 30, 40, 50, 60, 70]
    }]
  },
  options: {
    scales: {}
  }
})

const base64 = chart.toBase64Image();

ctx.remove();

console.log(base64)

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>

Solution 2:^[2]

its not possible to render without attaching canvas to dom, but you can hide it and it will work as expected.


const chartEl = document.createElement("canvas");
const ctx = chartEl.getContext("2d");
chartEl.setAttribute("width", "400");
chartEl.setAttribute("height", "400");
chartEl.style.display = "none";

document.body.append(chartEl);
let chart = new Chart(ctx, {
  type: "bar",
  data: {
    datasets: [
      {
        barPercentage: 0.5,
        barThickness: 6,
        maxBarThickness: 8,
        minBarLength: 2,
        data: [10, 20, 30, 40, 50, 60, 70]
      }
    ]
  },
  options: {
    scales: {}
  }
});

chart.render();
console.log(chart.toBase64Image());
chartEl.remove();

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	LeeLenalee
Solution 2	bogdanoff

'Render chartjs and export image to data not in the DOM

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]