circle-divided-by-chord

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

MIT © Ilaria Venturini

---

This project was bootstrapped with urca generator.