React minimal pie chart🍰 Lightweight but versatile SVG pie/donut charts for React. < 2kB gzipped.

Last update: Dec 14, 2022

Overview

React minimal pie chart

Lightweight React SVG pie charts, with versatile options and CSS animation included. < 2kB gzipped. 👏 Demo 👏 .

Why?

Because Recharts is awesome, but when you just need a simple pie/donought chart, ~~3kB~~ 2kB are usually enough.

	Benchmark Size *	Loading time on a slow 3g *
react-minimal-pie-chart (v8.2.0)	1.83 KB	~38 ms
rechart (v1.8.5)	96.9 KB	~1900 ms
victory-pie (v34.1.3)	50.5 KB	~1100 ms
react-apexcharts (v1.3.7)	114.6 KB	~2300 ms
react-vis (v1.11.7)	78.3 KB	~1600 ms

* Benchmark carried out with size-limit with a "real-world" setup: see benchmark repo. (What matter here are not absolute values but the relation between magnitudes)

Features

< 2kB gzipped
Versatile: Pie, Donut, Loading, Completion charts (see Demo)
Customizable chart labels and CSS animations
Written in Typescript
No dependencies

Installation

npm install react-minimal-pie-chart

If you don't use a package manager, react-minimal-pie-chart exposes also an UMD module ready for the browser.

https://unpkg.com/react-minimal-pie-chart/dist/index.js

Minimum supported Typescript version: >= 3.8

Usage

import { PieChart } from 'react-minimal-pie-chart';

<PieChart
  data={[
    { title: 'One', value: 10, color: '#E38627' },
    { title: 'Two', value: 15, color: '#C13C37' },
    { title: 'Three', value: 20, color: '#6A2135' },
  ]}
/>;

Options

Property	Type	Description	Default
data	`DataEntry[]`	Source data. Each entry represents a chart segment	[]
lineWidth	`number` (%)	Line width of each segment. Percentage of chart's radius	100
startAngle	`number`	Start angle of first segment	0
lengthAngle	`number`	Total angle taken by the chart (can be negative to make the chart clockwise!)	360
totalValue	`number`	Total value represented by the full chart	-
paddingAngle	`number`	Angle between two segments	-
rounded	`boolean`	Round line caps of each segment	-
segmentsShift	`number` or: `(segmentIndex) => number`	Translates segments radially. If `number` set, provide shift value relative to `viewBoxSize` space. If `function`, return a value for each segment. (`radius` prop might be adjusted to prevent segments from overflowing chart's boundaries)	-
segmentsStyle	`CSSObject` or: `(segmentIndex) => CSSObject`	Style object assigned to each segment. If `function`, return a value for each segment	-
segmentsTabIndex	`number`	`tabindex` attribute assigned to segments	-
label	`(labelRenderProps) => string \| number \| ReactElement`	A function returning a label value or the SVG element to be rendered as label	-
labelPosition	`number` (%)	Label position from origin. Percentage of chart's radius (50 === middle point)	50
labelStyle	`CSSObject` or: `(segmentIndex) => CSSObject`	Style object assigned to each label. If `function` set, return style for each label	-
animate	`boolean`	Animate segments on component mount	-
animationDuration	`number`	Animation duration in ms	500
animationEasing	`string`	A CSS easing function	ease-out
reveal	`number` (%)	Turn on CSS animation and reveal just a percentage of each segment	-
background	`string`	Segments' background color	-
children	`ReactElement` (svg)	Elements rendered as children of SVG element (eg. SVG `defs` and gradient elements)	-
radius	`number` (user units)	Radius of the pie (relative to `viewBoxSize` space)	50
center	`[number, number]`	x and y coordinates of center (relative to `viewBoxSize` space)	[50, 50]
viewBoxSize	`[number, number]`	`width` and `height` of SVG `viewBox` attribute	[100, 100]
onBlur	`(e, segmentIndex) => void`	`onBlur` event handler for each segment	-
onClick	`(e, segmentIndex) => void`	`onClick` event handler for each segment	-
onFocus	`(e, segmentIndex) => void`	`onFocus` event handler for each segment	-
onKeyDown	`(e, segmentIndex) => void`	`onKeyDown` event handler for each segment	-
onMouseOut	`(e, segmentIndex) => void`	`onMouseOut` event handler for each segment	-
onMouseOver	`(e, segmentIndex) => void`	`onMouseOver` event handler for each segment	-
	`.oOo.oOo.oOo.oOo.oOo.oOo.oOo.`

About `data` prop

data prop expects an array of chart entries as follows:

type Data = {
  color: string;
  value: number;
  key?: string | number;
  title?: string | number;
  [key: string]: any;
}[];

Each entry accepts any custom property plus the following optional ones:

key: custom value to be used as segments element keys
title: title element rendered as segment's child

Custom labels with `label` render prop

label prop accepts a function returning the string, number or element rendered as label for each segment:

<PieChart
  label={(labelRenderProps: LabelRenderProps) =>
    number | string | React.ReactElement | undefined | null
  }
/>

The function receives labelRenderProps object as single argument:

type LabelRenderProps = {
  x: number;
  y: number;
  dx: number;
  dy: number;
  textAnchor: string;
  dataEntry: {
    ...props.data[dataIndex]
    // props.data entry relative to the label extended with:
    startAngle: number;
    degrees: number;
    percentage: number;
  };
  dataIndex: number;
  style: React.CSSProperties;
};

Label prop, common scenarios

Render entries' values as labels:

label={({ dataEntry }) => dataEntry.value}

Render segment's percentage as labels:

label={({ dataEntry }) => `${Math.round(dataEntry.percentage)} %`}

See examples in the demo source.

How to

User interactions with the chart

See demo and relative source here and here.

Custom tooltip

See demo and relative source.

Browsers support

Here is an updated browsers support list 🔍 .

The main requirement of this library is an accurate rendering of SVG Stroke properties.

Please consider that Math.sign and Object.assign polyfills are required to support legacy browsers.

Misc

How svg arc paths work?

How SVG animations work?

This library uses the stroke-dasharray + stroke-dashoffset animation strategy described here.

Todo's

Consider moving storybook deployment to CI
Consider using transform to mutate segments/labels positions
Consider exposing a reduced chart variation including just a subset of the features
Consider abstracting React bindings to re-use business logic with other frameworks
Remove defaultProps in favour of JS default arguments
Provide a way to supply svg element with any extra prop
Consider removing import type declaration from generated type definition files (if possible) to ensure Typescript 3.0+ backward compatibility

Contributors

Thanks to you all (emoji key):

_{Andrea Carraro} 💻 📖 🚇 ⚠️ 👀	_{Stephane Rufer} 🐛 💻	_{Jørgen Aaberg} 💻	_{Tobiah Rex} 🐛	_{Edward Xiao} 🐛	_{David Konsumer} 💻 📖 💡 🤔	_Ori 🤔
_{Emmanouil Konstantinidis} 🐛	_yuruc 💻	_luca-esse 🐛	_{Oscar Mendoza} 🐛 💻	_damien-git 🐛 🤔	_{Vianney Stroebel} 🐛 🤔	_{Maxime Zielony} 🐛 💻
_{Raz Kedem} 🐛	_Blocksmith 🐛	_{Jamie Talbot} 🐛	_{Oscar Yixuan Chen} 🐛	_RuiRocha1991 🐛	_{Roman Kushyn} 🐛	_{Divjot Singh} 💻

Comments

Prop type for Chart enforces optional props
Do you want to request a feature or report a bug?

Bug

What is the current behaviour?

Omitting optional props throws warnings in the IDE

What is the expected behaviour?

To not throw any warnings if I omit optional props

Steps to Reproduce the Problem

Create any Chart component and omit any of the props defined here

The change to the props was introduced in this commit and effectively makes these props required.

Specifications

Version: 8.0.0

It would be my pleasure to open a PR in order to fix this
opened by mkarajohn 19
Slices disappearing in Safari

Do you want to request a feature or report a bug?

Reporting a bug.

What is the current behaviour?

Slices disappear on package v6.0.1 | Safari Version 13.0.5 (14608.5.12)

Rolled back to package v5.0.2 and the issue is gone.

Steps to Reproduce the Problem

<PieChart animate animationDuration={500} animationEasing="ease-out" data={data} />

bug

opened by clif-os 10
Gradients for pie chart segments

Do you want to request a feature or report a bug?

Requesting a feature.

What is the current behaviour?

Currently, gradients are not supported. That is, segments in the pie chart can only be of a single color.

What is the expected behaviour?

I know that you're trying to keep things simple (it is minimal after all), but even the possibility of injecting defs into the SVG via another property on the PieChart component to define our own gradients (and then reference them with the color property) would be awesome. Just an idea!

opened by nehoraigold 10
Tiny slices are not rendered correctly on Chrome
Do you want to request a feature or report a bug?

This is a rendering bug

What is the current behaviour?

When rendering a lot of really small slices weird artefacts are drawn

What is the expected behaviour?

No artefacts, maybe provide an option to ignore/hide super small slice (below a ceiling % value)

Steps to Reproduce the Problem

<ReactPieChart data={ [{"value":2421,"title":"a","color":"rgb(33, 150, 243)"},{"value":2413,"title":"a","color":"rgb(34, 150, 243)"},{"value":2403,"title":"a","color":"rgb(34, 151, 243)"},{"value":2399,"title":"a","color":"rgb(34, 151, 243)"},{"value":2395,"title":"a","color":"rgb(35, 151, 243)"},{"value":2387,"title":"a","color":"rgb(35, 151, 243)"},{"value":2383,"title":"a","color":"rgb(35, 151, 243)"},{"value":2380,"title":"a","color":"rgb(36, 151, 243)"},{"value":2373,"title":"a","color":"rgb(36, 151, 243)"},{"value":2373,"title":"a","color":"rgb(36, 151, 243)"},{"value":2360,"title":"a","color":"rgb(37, 152, 243)"},{"value":2359,"title":"a","color":"rgb(37, 152, 243)"},{"value":2354,"title":"a","color":"rgb(37, 152, 243)"},{"value":2349,"title":"a","color":"rgb(38, 152, 243)"},{"value":2345,"title":"a","color":"rgb(38, 152, 243)"},{"value":2312,"title":"a","color":"rgb(40, 153, 243)"},{"value":136,"title":"a","color":"rgb(178, 218, 251)"},{"value":136,"title":"a","color":"rgb(178, 218, 251)"},{"value":103,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":101,"title":"a","color":"rgb(181, 219, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":34,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":33,"title":"a","color":"rgb(185, 221, 251)"},{"value":32,"title":"a","color":"rgb(185, 221, 251)"},{"value":32,"title":"a","color":"rgb(185, 221, 251)"},{"value":8,"title":"a","color":"rgb(187, 222, 251)"},{"value":7,"title":"a","color":"rgb(187, 222, 251)"},{"value":7,"title":"a","color":"rgb(187, 222, 251)"},{"value":5,"title":"a","color":"rgb(187, 222, 251)"},{"value":4,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":2,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"},{"value":1,"title":"a","color":"rgb(187, 222, 251)"}] } />

Suggested fix

Rounding the percent seems to be fixing the issue. Line 266 const valueInPercentage = total === 0 ? 0 : ( dataEntry.value / total * 100 ).toFixed();

Specifications

Version: 6.0.1 (latest available

Platform: OSX Mojave, Chrome (80.0.3987.132)

bug
opened by xumi 8
Import package with react-scripts-ts
Do you want to request a feature or report a bug?

A bug?

What is the current behaviour?

I am trying to render a PieChart component in a test, something like this:

import { mount } from "enzyme"; import * as React from "react"; import PieChart from "react-minimal-pie-chart"; it("renders a pie chart", () => { mount(<PieChart data={[{ value: 1, color: "blue" }]} />); });

But when I try to execute it I get:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think the error is related to how the code is imported but I am not sure what could be the reason.

I am using "typescript": "^3.7.2" and "react-minimal-pie-chart": "^6.0.1".

What is the expected behaviour?

To be able to render a PieChart using jest

Steps to Reproduce the Problem

(Explained above, let me know if it's not reproducible)

Note that the code works as expected in the functional code, which is why I am confused.
opened by andresmgot 8
Allow float/string `0.0`
I need to use strings like 12.5 and 0.0 which works fine but fills the console with errors. Is there a way to ignore this?

Warning: Failed prop type: Invalid prop `data[0].value` of type `string` supplied to `ReactMinimalPieChart`, expected `number`.
opened by auipga 8
Accessibility issue with browser minimum font size
Do you want to request a feature or report a bug?

Bug.

What is the current behaviour?

When a user chooses a reasonable minimum font size in Firefox, labels look enormous. This happens because of the very small font size in labelStyle, made necessary by the small viewBox for the SVG which is not configurable. It is visible with the demo with labels, which uses a 5px font size. I was not able to reproduce that behavior with Chromium, somehow it calculate font sizes differently in this case. But it should be possible to make it work in both browsers.

What is the expected behaviour?

Font sizes given in labelStyle should match font sizes outside of the component, so that labels are rendered in the desired size when a minimum font size in chosen by users.

Steps to Reproduce the Problem

Firefox preferences - language and appearance - advanced - minimum font size: select 12px.

Check the label size at https://toomuchdesign.github.io/react-minimal-pie-chart/index.html?path=/story/labels--default-labels

See how different it is when no minimum font size is selected, even though it never matches the expected minimum size visually.

Specifications

Version: 5.0.1

Platform: Node 12, Firefox 70

Subsystem:
opened by damien-git 8
IE support

I suggest that modify your "animate Description" markdown to "Animate sectors on component mount(IE9 would not work properly if set to true)" kind of instruction, which could save a lot of times for people that searching for IE support.

opened by edwardfxiao 8
Expose the Typescript Types 🙏
Do you want to request a feature or report a bug?

request a feature

What is the current behaviour?

Many of the types are not exposed, so if I want to write, for example a strongly typed label function, i believe i have to duplicate the types. e.g.

type DataEntry = { title?: string | number value: number color: string percentage?: number filterId?: string } type Data = DataEntry[] type LabelProps = { data: Data dataIndex: number } const label = ({ data, dataIndex }: LabelProps) => { const percentage = data[dataIndex].percentage if (!percentage || percentage < 10) return '' return Math.round(data[dataIndex].percentage || 0) + '%' }

(This example from 7.3.1, but persists in the newest version too)

What is the expected behaviour?

Please export what is now called LabelRenderProps :)
opened by majelbstoat 7
add filterData prop
What kind of change does this PR introduce?

This is a feature

What is the current behaviour?

See this issue

What is the new behaviour?

You can add a filterSegments prop that will allow you to decide whether or not a segment should be rendered right before its creation

Does this PR introduce a breaking change?

No.

Other information:

This is my first ever pull request, sorry if I failed at it :D

Please check if the PR fulfills these requirements:

[X] Tests for the changes have been added

[X] Docs have been added / updated

enhancement don't merge
opened by xumi 6
Bad display on Edge / Firefox
When the Pie is animated, the drawing part is not properly display on Firefox and Edge.

Specifications

Version: 5.0.0

Platforms: Firefox Quantum 68.0.2/Microsoft Edge 44.17763.1.0

Subsystem: Windows 10

bug
opened by slumbering 6
Console warnings when using SSR
Hello. I'm using Next.js which has server side rendering (SSR) built in (e.g. loads from the server on page refresh).

I'm getting some console warnings when the page is being SSR loaded, as the numbers are not matching between the server and the client.

Here's one of the warnings.

Does anyone know if there's a way of fixing this?

Warning: Prop `dx` did not match. Server: "-31.536962440920004" Client: "-31.536962440920007" text [email protected]:///./node_modules/react-minimal-pie-chart/dist/index.js:99:23 svg [email protected]:///./node_modules/react-minimal-pie-chart/dist/index.js:329:38
opened by mledwards 1
Make labelPosition support segmentIndex callback function

I'd like for one of my labels to be nearer the end of the segment, but it doesn't look like labelPosition allows a callback function like the labelStyle does. I could create a PR for this?

Does anyone know a workaround?
enhancement

opened by mledwards 1
chore(deps): update update size-limit packages to v8 (major)
This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @size-limit/preset-small-lib | ^5.0.5 -> ^8.1.0 | | | | | | size-limit | ^5.0.5 -> ^8.1.0 | | | | |

Release Notes

ai/size-limit

v8.1.0

Compare Source

v8.0.1

Compare Source

Fixed config and modifyEsbuildConfig options (by Angelo Ashmore).

Updated esbuild.

v8.0.0

Compare Source

v7.0.8

Compare Source

Fixed peer dependencies.

v7.0.7

Compare Source

Fixed plugin versions in presets.

v7.0.6

Compare Source

Added brotlied note to CLI output (by @azat-io).

Updated nanospinner.

v7.0.5

Compare Source

Added pnpm examples to migration guide.

Fixed docs (by @azat-io).

v7.0.4

Compare Source

Updated esbuild.

Updated nanospinner.

v7.0.3

Compare Source

Fixed package size.

v7.0.2

Compare Source

Fixed peer dependency ignore in @size-limit/esbuild.

v7.0.1

Compare Source

Fixed --save-bundle arguments with @size-limit/esbuild.

Fixed ignore option with @size-limit/esbuild.

Fixed brotli option without webpack.

Fixed error messages.

v7.0.0

Compare Source

v6.0.4

Compare Source

Updated dependencies.

v6.0.3

Compare Source

Updated nanospinner.

v6.0.2

Compare Source

Fixed Statoscope report location (by Sergey Melyukov).

v6.0.1

Compare Source

Replaced mico-spinner to nanospinner.

v6.0.0

Compare Source

Configuration

📅 Schedule: Branch creation - "every month" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

[ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.
opened by renovate[bot] 0
Dependency Dashboard
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

[ ] chore(deps): update dependency @types/react to ^18.0.26

[ ] chore(deps): update dependency @types/react-dom to ^18.0.10

[ ] chore(deps): update update storybook packages (@storybook/addon-actions, @storybook/react, babel-loader)

[ ] chore(deps): update dependency all-contributors-cli to ^6.24.0

[ ] chore(deps): update dependency es-check to ^6.2.1

[ ] chore(deps): update dependency lint-staged to ^11.2.6

[ ] chore(deps): update dependency prettier to ^2.8.1

[ ] chore(deps): update dependency simple-git-hooks to ^2.8.1

[ ] chore(deps): update update babel packages (@babel/core, @babel/plugin-transform-react-jsx, @babel/preset-env, @babel/preset-typescript)

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

[ ] chore(deps): update update rollup packages (@rollup/plugin-babel, @rollup/plugin-commonjs, rollup)

[ ] chore(deps): update dependency jest-environment-jsdom to ^29.3.1

[ ] chore(deps): update dependency react-tooltip to ^4.5.1

[ ] chore(deps): update dependency typescript to ^4.9.4

[ ] chore(deps): update update jest packages to ^29.3.1 (babel-jest, jest)

[ ] chore(deps): update actions/setup-node action to v3

[ ] chore(deps): update dependency @rollup/plugin-commonjs to v24

[ ] chore(deps): update dependency babel-loader to v9

[ ] chore(deps): update dependency es-check to v7

[ ] chore(deps): update dependency lint-staged to v13

[ ] chore(deps): update dependency react-tooltip to v5

[ ] chore(deps): update node.js to v18

[ ] 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

[ ] chore(deps): update update size-limit packages to v8 (major) (@size-limit/preset-small-lib, size-limit)

Detected dependencies

github-actions

.github/workflows/ci.yml

actions/checkout v3

actions/setup-node v2

npm

package.json

@types/svg-path-parser ^1.1.3

@babel/core ^7.12.10

@babel/plugin-transform-react-jsx ^7.12.12

@babel/preset-env ^7.12.11

@babel/preset-typescript ^7.12.7

@rollup/plugin-babel ^6.0.2

@rollup/plugin-commonjs ^23.0.2

@rollup/plugin-node-resolve ^15.0.1

@schwingbat/relative-angle ^1.0.0

@size-limit/preset-small-lib ^5.0.5

@storybook/addon-actions ^6.5.13

@storybook/react ^6.5.13

@storybook/storybook-deployer ^2.8.16

@testing-library/jest-dom ^5.16.5

@testing-library/react ^13.4.0

@types/react ^18.0.24

@types/react-dom ^18.0.8

all-contributors-cli ^6.19.0

babel-jest ^29.2.2

babel-loader ^8.2.2

es-check ^6.0.0

jest ^29.2.2

jest-environment-jsdom ^29.2.2

lint-staged ^11.1.2

prettier ^2.2.1

react ^18.2.0

react-dom ^18.2.0

react-tooltip ^4.4.3

rollup ^3.2.3

simple-git-hooks ^2.4.1

size-limit ^5.0.5

svg-partial-circle 1.0.0

svg-path-parser ^1.1.0

typescript ^4.8.4

react ^16.8.0 || ^17.0.0 || ^18

react-dom ^16.8.0 || ^17.0.0 || ^18

nvm

.nvmrc

node 16

[ ] Check this box to trigger a request for Renovate to run again on this repository
opened by renovate[bot] 0
Feature Request: Animate on data change

Do you want to request a feature or report a bug?

Feature

If I set the "animate" Poperty to true, the chart will be nicely built up at start. Now the user can change the data of the chart and I would like to animate these changes.Now if I only change the data of the chart, it will be displayed correctly, but unfortunately no animation happens.
enhancement help wanted

opened by mrsamse 2
Segments edges rendering issues
The way some browsers render SVG paths cause a few visual issues especially when when full pies are rendered:

More specifically a few OS/browser combinations seem to not being able to render SVG stroke line caps precisely enough. Here is a list browsers where issues where reported and reproduced.

|OS|Browser|Issue| |---|---|---| | iOS |iOS Safari|full pie charts visual glitch when animate !== true| |Windows 10|Firefox v68+| full pie charts visual glitch when animate === true|

Somehow SVG stroke-dasharray property is the key here but different browsers react in opposite ways so that I can't currently see an easy patch not involving browser detection.

stroke-dasharray + stroke-dashoffset are currently only appended when animation is enabled.

Partially supported

|OS|Browser|Issue| |---|---|---| |Windows 10|Edge ≤ v44|animation === true breaks visually|

Not supported

IE ≤ 10

Related issues

#112

#73

bug help wanted
opened by toomuchdesign 2