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

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)

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);

RoadMap

• Refactor to d3.js