How to set the background color of chart js in node js

Question

Cant able to set background color for the chart js

Im creating an application where i will share chart to slack, im creating the chart in backend using node canvas and chart js , im generating the image but the background is transparent, i need it in white, how can i do it ,

Below is the code

import { createCanvas } from "canvas"
import {Chart, registerables} from "chart.js"

Chart.register(...registerables)

function createChart(options) {
    console.log(JSON.stringify(options));
    const canvas = createCanvas(1024, 1024)
    const ctx = canvas.getContext("2d")
    // //gridLines: {
    //     color: 'rgb(255, 255, 255)'
    // }
    // options.options.scales.y.gridLines = options.options.scales.y.gridLines || {}
    // options.options.scales.y.gridLines.color = 'rgb(255, 255, 255)'
    // options.options = options.options || {};
    // options.options.scales = options.options.scales || {};
    // options.options.scales.x = options.options.scales.x || {}
    // options.options.scales.x.gridLines = options.options.scales.x.gridLines || {}
    // options.options.scales.x.gridLines.color = 'rgb(255, 255, 255)'
    // options.options.plugins = options.options.plugins || {};
    // options.options.plugins = options.options.plugins || {};
    // options.options.plugins.backgroundColor = 'rgb(255, 255, 255)';

    // options.options.plugins.legend = options.options.plugins.legend || {};
    // //options.options.plugins.legend.backgroundColor = 'rgb(255, 255, 255)';
    // options.options.plugins.legend.labels = options.options.plugins.legend.labels || {};
    //options.options.plugins.legend.labels.color = 'rgb(0, 0, 0)'; // Set label color

    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height)


    new Chart(ctx, options)
    const base64Image = canvas.toDataURL("image/jpeg")

    canvas.toBuffer()
    return base64Image
}

export default createChart;
 

Answer 1

Is it what you expect

You have to

1. Define options.plugin customCanvasBackgroundColor
2. Pass the props you want (ex: color: "red")
3. Handle and use the color prop in beforeDraw options to fillStyle

const { createCanvas } = require("canvas");
const { Chart, registerables } = require("chart.js");

const { promises: fs } = require("fs");

Chart.register(...registerables);

const data = {
  labels: ["Red", "Blue", "Yellow"],
  datasets: [
    {
      label: "My First Dataset",
      data: [300, 50, 100],
      backgroundColor: ["rgb(255, 99, 132)", "rgb(54, 162, 235)", "rgb(255, 205, 86)"],
      hoverOffset: 4,
    },
  ],
};

const plugin = {
  id: "customCanvasBackgroundColor",
  beforeDraw: (chart, args, options) => {
    const { ctx } = chart;
    ctx.save();
    ctx.globalCompositeOperation = "destination-over";
    ctx.fillStyle = options.color || "#99ffff";
    ctx.fillRect(0, 0, chart.width, chart.height);
    ctx.restore();
  },
};

async function createChart() {
  const canvas = createCanvas(1024, 1024);
  const ctx = canvas.getContext("2d");

  const config = {
    type: "doughnut",
    data,
    options: {
      plugins: {
        customCanvasBackgroundColor: {
          color: "red",
        },
      },
    },
    plugins: [plugin],
  };

  const chart = new Chart(ctx, config);

  const image = chart.toBase64Image("image/png", 1);

  //   console.log(image);

  await fs.writeFile("./example.txt", image, "ascii");

  return image;
}

createChart();