0
189
Viewsreact - override the style of canvas
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
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question