react-svg-piechart

A lightweight responsive React pie chart component using only SVG

Getting started

You can download react-svg-piechart from the NPM registry via the npm or yarn commands

yarn add react-svg-piechart
npm install react-svg-piechart --save

If you don't use package manager and you want to include react-svg-piechart directly in your html, you could get it from the UNPKG CDN

https://unpkg.com/react-svg-piechart/umd/react-svg-piechart.js

Demo

See Demo page

Usage

import React from "react"
import ReactSvgPieChart from "react-svg-piechart"

const data = [
  {title: "Data 1", value: 100, color: "#22594e"},
  {title: "Data 2", value: 60, color: "#2f7d6d"},
  {title: "Data 3", value: 30, color: "#3da18d"},
  {title: "Data 4", value: 20, color: "#69c2b0"},
  {title: "Data 5", value: 10, color: "#a1d9ce"},
]

const MyCompo = () => (
  <ReactSvgPieChart
    data={data}
    // If you need expand on hover (or touch) effect
    expandOnHover
    // If you need custom behavior when sector is hovered (or touched)
    onSectorHover={(d, i, e) => {
      if (d) {
        console.log("Mouse enter - Index:", i, "Data:", d, "Event:", e)
      } else {
        console.log("Mouse leave - Index:", i, "Event:", e)
      }
    }}
  />
)

Props

| Name | PropType | Description | Default | | ------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------ | ---------- | | data | Array of data Objects | One data is {value: number (required), color: string, title: string, expanded: bool, href: string} | [] | | expandedIndex | Number | Pass in an index to manually control the expanded sector of the pie | expandOnHover | Boolean | Active hover and touch (mobile) effects | false | | onSectorHover | Function | Callback when one sector is hovered or touched (mobile) - ex: (data, index, event) => {} | null | | expandSize | Number | expand size, in pixels. Used if expandOnHover is active or one data has expanded attribute set to true | | | strokeColor | String | Sector stroke color | "#fff" | | startAngle | Number | Angle to start drawing sectors from measured clockwise from the x-axis | 0 | | angleMargin | Number | Angle of margin between sectors | 0 | | strokeLinejoin | String | Sector stroke line join (One of miter, round, bevel) | "round" | | strokeWidth | Number | Sector width, in pixels (0 to disable stroke) | 1 | | viewBoxSize | Number | SVG viewbox width and height | 100 | | transitionDuration | String | CSS property for transition-duration, set to 0s to disable transition | "0s" | | transitionTimingFunction | String | CSS Property for transition-timing-function | "ease-out" |

Contributing

• ⇄ Pull/Merge requests and ★ Stars are always welcome.
• For bugs and feature requests, please create an issue.
• Pull requests must be accompanied by passing automated tests (npm test).

See CONTRIBUTING.md guidelines

Changelog

See changelog

License

This project is licensed under the MIT License - see the LICENCE.md file for details