Circle divided by chord
Divide a circle into two circular segments whose area is proportional to the data
This React component allows you to divide a circle into two circular segments whose area is proportional to the data received in input.
Take a look to divide-up-circle-in-circular-segments for more information.
Install
npm install --save circle-divided-by-chord
or
yarn add circle-divided-by-chord
API
Props are all optional:
Prop | Type | Default value | Description |
---|---|---|---|
color1 |
string |
#8DC0B1 |
color of the first section |
color2 |
string |
#F3E0D2 |
color of the second section |
radius |
number |
200 |
radius of the circle (px) |
datum1 |
number |
20 |
first datum in [0-100]
|
datum2 |
number |
80 |
second datum in [0-100]
|
angle |
number |
135 |
rotation angle (degree) |
Demo page
Here the demo page.
Examples
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"
const Example = () => {
return <CircleDividedByChord />
}
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"
const Example = () => {
return (
<CircleDividedByChord
radius={150}
datum1={50}
datum2={50}
angle={0}
color1="#FF6663"
color2="#0B3954"
/>
)
}
import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"
const Example = () => {
return (
<CircleDividedByChord
radius={150}
datum1={70}
datum2={30}
angle={0}
color1="#525174"
color2="#5DD39E"
/>
)
}
License
This project was bootstrapped with urca generator.