Is it possible to have transparent canvas and text background?

Hi! First of all, I’m using ChartJsToImage (let me know if this is the wrong place to ask).

I want my canvas to be transparent, but my title and legend labels to have a background so I can properly read it.
Here is my chart right now:


And here is something I want to achieve.

My code:

{
  chart: "{type:'pie',data:{datasets:[{data:[7,2,1,1],backgroundColor:['#0084d1','#c5000b','#ff950e','#5b1f6f','#aecf00','#314004','#83caff','#7e0021','#579d1c','#ffd320','#ff420e','#004586'],borderColor:'#000000',color:'#',borderWidth:4}],labels:['História','Bug','Tarefa','Melhoria']},options:{title:{display:true,text:'Tipos de itens (taxa de inovação)',fontColor:'#000000',font:{size:30}},devicePixelRatio:1.5,legend:{position:'right',labels:{fontColor:'#000000',boxWidth:15}},plugins:{datalabels:{display:true,align:'center',color:'#000000',font:{size:30,weight:'bold'}}}}}",
  width: 750,
  height: 450,
  devicePixelRatio: 1.8,
  backgroundColor: 'transparent',
  format: 'png'
}

Thank you in advance.

Hi @Pohren,

It doesn’t look like Chart.js supports this directly, but you could write a custom plugin that just draws the backgrounds behind those areas.

Here’s an example plugin that draws two rectangles behind the legend and title:

{
    id: 'legendTitleBackground',
    beforeDraw: (chart, args, options) => {
      const { ctx } = chart;
      ctx.fillStyle = '#ccc';
      ctx.fillRect(150, 10, 200, 18)
      ctx.fillRect(420, 120, 100, 100)
    },
}

Here’s how you’d include it in the full chart:

{
  type: 'pie',
  data: {
    datasets: [
      {
        data: [7, 2, 1, 1],
        backgroundColor: [
          '#0084d1',
          '#c5000b',
          '#ff950e',
          '#5b1f6f',
          '#aecf00',
          '#314004',
          '#83caff',
          '#7e0021',
          '#579d1c',
          '#ffd320',
          '#ff420e',
          '#004586',
        ],
        borderColor: '#000000',
        color: '#',
        borderWidth: 4,
      },
    ],
    labels: ['História', 'Bug', 'Tarefa', 'Melhoria'],
  },
  options: {
    title: {
      display: true,
      text: 'Tipos de itens (taxa de inovação)',
      fontColor: '#000000',
      font: { size: 30 },
    },
    devicePixelRatio: 1.5,
    legend: {
      position: 'right',
      labels: { fontColor: '#000000', boxWidth: 15 },
    },
    plugins: {
      datalabels: {
        display: true,
        align: 'center',
        color: '#000000',
        font: { size: 30, weight: 'bold' },
      },
    },
  },
  plugins: [{
    id: 'legendTitleBackground',
    beforeDraw: (chart, args, options) => {
      const { ctx } = chart;
      ctx.fillStyle = '#ccc';
      ctx.fillRect(150, 10, 200, 18)
      ctx.fillRect(420, 120, 100, 100)
    },
  }],
}

Unfortunately, custom plugin support is not available in the community version of QuickChart, as it requires more computationally expensive sandboxing to safely run JS that manipulates the chart canvas.

But here’s how the above renders with a Professional key, or with the self-hosted version (background color and area are for demonstration, you could adjust to your liking):

Hope this helps!

1 Like