You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

react-svg-piechart

Package Overview
Dependencies
2
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-svg-piechart

A lightweight responsive pie chart component for React using only SVG


Version published
Maintainers
1
Created

Readme

Source

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

NamePropTypeDescriptionDefault
dataArray of data ObjectsOne data is {value: number (required), color: string, title: string, expanded: bool, href: string}[]
expandedIndexNumberPass in an index to manually control the expanded sector of the pie
expandOnHoverBooleanActive hover and touch (mobile) effectsfalse
onSectorHoverFunctionCallback when one sector is hovered or touched (mobile) - ex: (data, index, event) => {}null
expandSizeNumberexpand size, in pixels. Used if expandOnHover is active or one data has expanded attribute set to true
strokeColorStringSector stroke color"#fff"
startAngleNumberAngle to start drawing sectors from measured clockwise from the x-axis0
angleMarginNumberAngle of margin between sectors0
strokeLinejoinStringSector stroke line join (One of miter, round, bevel)"round"
strokeWidthNumberSector width, in pixels (0 to disable stroke)1
viewBoxSizeNumberSVG viewbox width and height100
transitionDurationStringCSS property for transition-duration, set to 0s to disable transition"0s"
transitionTimingFunctionStringCSS 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

Keywords

FAQs

Package last updated on 04 Nov 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc