rounded-edge-donut

0.14.0 • Public • Published

Donut chart with Rounded Edges

This project is extension of react-chart-j2 donut chart. This package provides nice little overlapping edges for donut chart with minimal third part dependecies.

Screenshots

App Screenshot with backgroundImage

App Screenshot

Usage/Examples

import { RoundeEdgeDonut } from "rounded-edge-donut";
const iconBase64 =
  'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJhY3RpdmVzdmciIGNsYXNzbmFtZT0iTXVpU3ZnSWNvbi1yb290IGpzczgxIiBmb2N1c2FibGU9ImZhbHNlIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGFyaWEtaGlkZGVuPSJ0cnVlIj4KICAgICAgPHBhdGggZD0iTTE4LjkyIDYuMDFDMTguNzIgNS40MiAxOC4xNiA1IDE3LjUgNWgtMTFjLS42NiAwLTEuMjEuNDItMS40MiAxLjAxTDMgMTJ2OGMwIC41NS40NSAxIDEgMWgxYy41NSAwIDEtLjQ1IDEtMXYtMWgxMnYxYzAgLjU1LjQ1IDEgMSAxaDFjLjU1IDAgMS0uNDUgMS0xdi04bC0yLjA4LTUuOTl6TTYuNSAxNmMtLjgzIDAtMS41LS42Ny0xLjUtMS41UzUuNjcgMTMgNi41IDEzczEuNS42NyAxLjUgMS41UzcuMzMgMTYgNi41IDE2em0xMSAwYy0uODMgMC0xLjUtLjY3LTEuNS0xLjVzLjY3LTEuNSAxLjUtMS41IDEuNS42NyAxLjUgMS41LS42NyAxLjUtMS41IDEuNXpNNSAxMWwxLjUtNC41aDExTDE5IDExSDV6Ii8+CiAgICA8L3N2Zz4='


function App() {
  return <RoundeEdgeDonut width={500} height={500} chartData={{
      labels: ['data1', 'data2', 'data3'],
      colors: ['#ff253a', '#f4b710', '#2cb61be3'],
      values: [76, 12, 12],
    }} 
    icon={iconBase64}
    displayLegend={true}
    legendPosition={"left"}
    />
}

Props Documentation

Prop Name Type Default Description
chartData object {labels: ['data1','data2',data3],colors: ['#ff253a', '#f4b710', '#2cb61be3'],values: [76, 12, 12]} Datasource for donut chart
displayLegend boolean false flag to show/hide legends
icon string '' Url of icon to show inside donut
legendPosition string right Position of legends
options object object extra options that can be passed to donut chart
width string or number 269 width of donut chart
height string or number 90 height of donut chart
className string empty className for donut
redraw boolean false should chart redraw on prop change
backgroundStyles Object {} additional styles to be added to donut background. in order to control size of background image use backgroundStyles={backgroundSize: '20px'}

Demo

https://codesandbox.io/s/uetg19?file=/src/App.js

Package Sidebar

Install

npm i rounded-edge-donut

Weekly Downloads

2

Version

0.14.0

License

MIT

Unpacked Size

15.4 kB

Total Files

8

Last publish

Collaborators

  • talhafayyaz