Circle-divided-by-chord NPM

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

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.

demo

Examples

import React from "react"
import CircleDividedByChord from "circle-divided-by-chord"

const Example = () => {
  return <CircleDividedByChord />
}

example1

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"
    />
  )
}

example2

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"
    />
  )
}

example3