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.