meetzaveri / react-donut

🍩 Simple and editable donut chart for react components

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

react-donut's Issues

Does not work with Next.js

What doesn't work

Currently when trying to use this module in a Next.js application, I get an error that says Global CSS cannot be imported from within node_modules

More about the Next.js Error

Global CSS cannot be imported from within node_modules

Temporary workaround

I managed to create a workaround in my own project by changing your package.json "main" to export dist/lib/tui-wrapper.js instead of dist/index.js AND by using a "dynamic" import in my Next.js app.

import dynamic from 'next/dynamic';
const DynamicDonut = dynamic(() => import('react-donut'), { ssr: false });

Does not work with typescript

when trying to install library typing using:
npm install @types/react-donut -D

I get the following error message:
@types/react-donut@latest' is not in the npm registry.

Not working properly when using twice in the same page

I'm using donut twice on the same page but somehow it's appearing in one div only whereas i defined it in two different divs

react-donut.txt

Please provide me a solution for this

Need many more disabling features

To implement this kind of simple chart, should disable/enable some features.

toolTip

how to customize the onHover tooltip according to the requirements.

Here i want to multiple labels with values in the onHover toolTip.
How can i ?

please help me out in knowing how to customize toolTip

Is there a way to disable /hide the legend?

i don't see a setting to disble/hide the legend, is there one? Or is there a work-aroiund?