React radial Gradient fill within chart

user_4214984 0
Viewed 120

I'm working on a LED/Meter style visual in react: https://codesandbox.io/s/clever-almeida-1275n?file=/src/App.js

My end goal is to get to something like this enter image description here

As you can see it's using a radial type gradient for the fill.

Am I able to achieve this in my code or is there a library that can support this easily?

 <div className="App" style={{ textAlign: "left" }}>
      <span style={{ color: "white" }}>Track A</span>

      <MeterBar
        // height={"50px"}
        value={32}
        ledTotal={50}
        orientation="horizontal"
        ranges={[
          { min: 0, max: 30, color: "green" },
          { min: 31, max: 45, color: "orange" },
          { min: 46, max: 50, color: "red" }
        ]}
      />
reactjs
1 Answers

No external library required, just add one more value to the object ranges. example

App

{
  min: 0,
  max: 30,
  color: "green",
  gradient: "radial-gradient(hsl(99, 100%, 45%) 20%, hsl(99, 100%, 20%) 100%)"
}

MeterBar

style={{
   minHeight: "100%",
   background: ledRange?.color ? ledRange.gradient : "grey",
   margin: "1px",
   flexGrow: 1,
   opacity: value >= idx ? 1 : 0.3,
   borderRadius: "1px"
}}
user_155451160
Related