Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meetzaveri/react-donut
🍩 Simple and editable donut chart for react components
https://github.com/meetzaveri/react-donut
chart donut donut-chart doughnut doughnut-chart js react tui-chart
Last synced: 19 days ago
JSON representation
🍩 Simple and editable donut chart for react components
- Host: GitHub
- URL: https://github.com/meetzaveri/react-donut
- Owner: meetzaveri
- License: apache-2.0
- Created: 2018-02-09T05:49:59.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-04-24T10:19:46.000Z (over 3 years ago)
- Last Synced: 2024-10-25T09:48:15.182Z (22 days ago)
- Topics: chart, donut, donut-chart, doughnut, doughnut-chart, js, react, tui-chart
- Language: JavaScript
- Homepage:
- Size: 872 KB
- Stars: 14
- Watchers: 2
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-donut 🍩
A tui-chart wrapper component for donut chart built for react. Its built on top of tui-chart library. Reference
## Installation
[](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
## 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