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

with backgroundImage

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