react-donut 🍩

A tui-chart wrapper component for donut chart built for react. Its built on top of tui-chart library. Reference

Installation


Using npm:

``
npm install react-donut
`

Demo

#### Codesandbox demo here

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

API

$3

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 (


const rootElement = document.getElementById('root');
ReactDOM.render(, rootElement);
``

RoadMap

- Refactor to d3.js