react-svg-piechart

    2.4.2 • Public • Published

    react-svg-piechart

    npm package Travis Codecov Module formats

    A lightweight responsive React pie chart component using only SVG

    Getting started

    react-svg-piechart

    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

    Install

    npm i react-svg-piechart

    DownloadsWeekly Downloads

    1,793

    Version

    2.4.2

    License

    MIT

    Unpacked Size

    89.7 kB

    Total Files

    15

    Last publish

    Collaborators

    • cedricdelpoux