react - override the style of canvas

Question

This is the current UI
I want to remove the background-color of the the numbers(1-10), which is #fff.

Is it possible to do so?

App.tsx

import React from "react";
import {
  Chart as ChartJS,
  RadialLinearScale,
  ArcElement,
  Tooltip,
  Legend
} from "chart.js";
import { PolarArea } from "react-chartjs-2";

ChartJS.register(RadialLinearScale, ArcElement, Tooltip, Legend);

export const data = {
  labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  datasets: [
    {
      label: "# of Votes",
      data: [1, 1, 1, 10, 1, 1],
      backgroundColor: [
        "rgba(255, 99, 132, 0.5)",
        "rgba(54, 162, 235, 0.5)",
        "rgba(255, 206, 86, 0.5)",
        "rgba(75, 192, 192, 0.5)",
        "rgba(153, 102, 255, 0.5)",
        "rgba(255, 159, 64, 0.5)"
      ],
      borderWidth: 1
    }
  ]
};

export function App() {
  return <PolarArea data={data} />;
}

Codesandbox
https://codesandbox.io/s/autumn-sun-ty6egy?file=/App.tsx

Helder Sepulveda · Answer 1 · 2022-07-12T10:49:32.437

0

If your only question is:

I want to remove the background-color ... Is it possible to do so?

Answer is YES. without a doubt that is possible!

...but are you sure there is a background color on the numbers?
it looks transparent to me...

But since that chart is not your code, you will have to rely on what they have:
https://react-chartjs-2.js.org/components/polar-area

Or if you got the skills, modify the source code of that package you are using:
https://github.com/reactchartjs/react-chartjs-2

Here is a circle with a number, no background:

var c = document.getElementById('canvas').getContext("2d");
c.fillText("88", 45, 15)
c.arc(50, 50, 40, Math.PI * 3/2 + 0.2, Math.PI * 3/2 - 0.2)
c.stroke()

<canvas id="canvas"></canvas>

edited Jul 12 '22 at 10:49

answered Jul 12 '22 at 09:40

Helder Sepulveda

15,500
4
29
56

Yes I'm sure there is a background color on the numbers. How to do it anyway? – CCCC Jul 12 '22 at 09:44
@CCCC I do not see that background, can you point to something specific that makes you believe there is a background? – Helder Sepulveda Jul 12 '22 at 09:53
Hello @Helder Sepulveda, if you take closer look on the circles which surround the number, you will see the line of the circle is not connected – CCCC Jul 12 '22 at 10:00
you can zoom-in and see that – CCCC Jul 12 '22 at 10:01
@CCCC the line could be ending there, we can easily stroke circles that do not connect all the way, that is not proof that there is a background – Helder Sepulveda Jul 12 '22 at 10:37

score 0 · Accepted Answer · answered Jul 13 '22 at 07:38

I've got the answer from Github

For a PolarArea chart you'd need to set the options like so:

export const options = {
  scales: {
    r: {
      ticks: {
        backdropColor: "rgba(0,0,0,0)"
      }
    }
  }
};

Example:
https://codesandbox.io/s/headless-shadow-b9v2kx?file=/App.tsx:243-363

react - override the style of canvas

2 Answers2