react-pie-slice

A simple component of a pie-chart slice created in ReactJS and SVG.

Usage no npm install needed!

<script type="module">
  import reactPieSlice from 'https://cdn.skypack.dev/react-pie-slice';
</script>

README

React Pie Slice

A simple component of a slice created in ReactJS and SVG.

Usage

<PieSlice
  centerX={64}
  centerY={64}
  radius={32}
  start={0}
  end={30}
  opacity={1.0}
  color='blue'
/>

Properties

centerX: React.PropTypes.number // The distance from upper left corner of your screen in x-direction.

centerY: React.PropTypes.number // The distance from upper left corner of your screen in y-direction.

radius: React.PropTypes.number // The distance from the center to the edge of your slice.

start: React.PropTypes.number // The starting angle of a slice in degrees.

end: React.PropTypes.number // The ending angle of a slice in degrees.

color: React.PropTypes.string // The color of the slice. Default: white

opacity: React.PropTypes.number // The opacity of the slice. Default: 1.0

strokeWidth: React.PropTypes.string // The width of the stroke. Default: 1.0

strokeColor: React.PropTypes.string // The color of the stroke. Default: black

strokeOpacity: React.PropTypes.string // The opacity of the stroke. Default: 1.0

mouseEnter: React.PropTypes.func // A callback function to execute when the mouseenter is fired on a slice.

mouseLeave: React.PropTypes.func // A callback function to execute when the mouseleave is fired on a slice.