Is it possible to have transparent canvas and text background?

1

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:

pieChart
pieChart1350×810 46.9 KB

And here is something I want to achieve.
expected
expected1350×810 51.7 KB

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.

2

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):

chart.js background for legend and title
chart.js background for legend and title1000×600 35.2 KB

Hope this helps!

2 Likes
3

Hi @ian ! Thank you for the response, really appreciate it! You rock!!
Do you have any documentation or tutorial for running quickChart selfhosted?

4

Hi @Pohren, sorry for the late reply but I would suggest having a look at the Github repo here: GitHub - typpo/quickchart: Chart image and QR code web API

The easiest way to get up and running is via Docker. There is a public Docker image available: Docker Hub so you can run docker pull ianw/quickchart locally and run the image.

1 Like
5

Yeah. I’m planning on maybe a VM in AWS using this docker image. Thanks a lot, have a great day.