react-donut
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

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

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-donut

Weekly Downloads

665

Version

1.1.4

License

none

Unpacked Size

42.3 kB

Total Files

14

Last publish

Collaborators

  • meetzaveri