React-donut NPM

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

props

Config for theme (Optional)

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

import React from 'react';
import ReactDOM from 'react-dom';
import Donut from 'react-donut';
import './styles.css';

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Donut
        chartData={[
          { name: 'Black Panther', data: 30 },
          { name: 'Avengers', data: 50 },
          { name: 'Antman', data: 20 },
        ]}
        chartWidth={300}
        chartHeight={500}
        title="Marvel movies that were popular this year"
        chartThemeConfig={{
          series: {
            colors: ['#ffe0bd', '#670303', '#6cbfce'],
          },
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);