CODEWITHSUNDEEP
reactjs
Fuaad
Fuaad

Reputation: 440

How to increase font-weight in react-circular-progressbar?

I'm using react-circular-progressbar library, unfortunately, I'm unable to change font-weight of text. Although I'm able to manage text size using textSize property in styles object but font-weight property isn't working. I tried its variations as well,(e.g. textWeight, fontWeight) but nothing seems to be working in favour of mine.

Here is the code for the component:

import React from "react";
import { CircularProgressbar, buildStyles } from "react-circular-progressbar";
import { CircularProgressbarWithChildren } from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";

function Circular_progress_bar() {
  const percentage = 50;

  return (
    <div>
      <CircularProgressbar
        value={percentage}
        text={`${percentage}%`}
        background
        backgroundPadding={0}
        styles={buildStyles({
          textSize: "2.5rem",
          textShadow: "0 0 2px #000",
          textWeight: "700 !important",
          fontWeight: "900 !important",
          backgroundColor: "#102558",
          textColor: "#fff",
          pathColor: "#00ade9",
          trailColor: "transparent",
          transform: "rotate(90deg)",
          transformOrigin: "center center",
          rotation: 1 / 7 + 1 / 10,
          text: {
            // Text color
            fill: "#1d1d1d",
            // Text size
            fontSize: "2.5rem",
            fontWeight: "900 !important",
            textShadow: "0 0 2px #000",
          },
        })}
      />
    </div>
  );
}

export default Circular_progress_bar;

Also, I want to change the background of the completed section in the circle and I couldn't find such functionality in any of the pre-available types. Here is the link to codesandbox for better explanation: https://codesandbox.io/s/progressbar-fontweight-x4xnuh

Upvotes: 0

Views: 889

Answers (1)

RubenSmn
RubenSmn

Reputation: 4672

You can not do this using buildStyles by looking at the source code, according to the docs this function can only be used

to configure the most common style changes

This means that buildStyles is a shorthand. You'll need to provide the elements of which you want to customize the style. See the docs second example. You can change the fontWeight like so, without using buildStyles.

<CircularProgressbar
  value={percentage}
  text={`${percentage}%`}
  background
  backgroundPadding={0}
  styles={{
    ...
    text: {
      ...
      fontWeight: "bold",
    },
  }}
/>

Live preview

Upvotes: 0

Related Questions