# react-donut 🍩 A tui-chart wrapper component for donut chart built for react. Its built on top of tui-chart library. Reference ## Installation [![NPM version](https://img.shields.io/badge/npm-1.1.3-brightgreen.svg)](https://www.npmjs.com/package/react-donut) Using npm: ``` npm install react-donut ``` ## Demo #### Codesandbox demo [here](https://codesandbox.io/s/infallible-raman-oflzu) ## Contribute Pre-requisites - Fork this repo - Clone it into your local machine Steps to start development - `npm install` to install npm packages - `npm run start` to spin up dev server ## Screenshots ![Donut](https://i.imgur.com/vpxUlBh.png) ## API ### props

name	type	default	description
chartData	Array	An array of objects	To supply actual data with `name` as name and `data` as total data of that item. This is actually array of objects
chartWidth	Number	400	Specifies width of Doughnut Chart
chartHeight	Number	400	Specifies height of Doughnut Chart
title	String	'Usage of browsers'	Title for chart
chartRadiusRange	Array	["60%", "100%"]	Radius range of outer and inner crust of donut
showChartLabel	Boolean	true	To enable visibility for chart label
legendAlignment	String	'bottom'	Position for alignment of legend
chartThemeConfig	Object	{}	Custom chart theme config. Structure as shown below

## Config for theme (Optional) ```ts ThemeConfig { chart?: { fontFamily?: string; background?: string; }; title?: { fontSize?: number; fontFamily?: string; fontWeight?: string; color?: string; background?: string; }; yAxis?: { title?: TextStyleConfig; label?: TextStyleConfig; tickColor?: string; }; xAxis?: { title?: TextStyleConfig; label?: TextStyleConfig; tickColor?: string; }; plot?: { lineColor?: string; background?: string; label?: { fontSize: number; fontFamily: number; color: string; } }; series?: { colors?: string[]; borderColor?: string; selectionColor?: string; startColor?: string; endColor?: string; overColor?: string; ranges?: any[]; borderWidth?: string; dot?: SeriesDotOptions; }; legend?: { label?: TextStyleConfig; }; tooltip?: any; chartExportMenu?: { backgroundColor?: string; borderRadius?: number; borderWidth?: number; color?: string }; } ``` ## Usage ```js import React from 'react'; import ReactDOM from 'react-dom'; import Donut from 'react-donut'; import './styles.css'; function App() { return (

Hello CodeSandbox

); } const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement); ``` ## RoadMap - Refactor to d3.js

react-donut

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past