react-donut
A tui-chart wrapper component for donut-chart built for react.
Last updated 5 months ago by meetzaveri .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-donut 
SYNC missed versions from official npm registry.

react-donut ????

A tui-chart wrapper component for donut-chart built for react.

Installation

NPM version

Using npm:

npm install react-donut

Codesandbox demo here

Screenshots

Donut

API

props

name type default description
chartData Array Dummy 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

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

Current Tags

  • 1.0.4                                ...           latest (5 months ago)

13 Versions

  • 1.0.4                                ...           5 months ago
  • 1.0.3                                ...           5 months ago
  • 1.0.2                                ...           5 months ago
  • 1.0.1                                ...           5 months ago
  • 1.0.0                                ...           5 months ago
  • 0.5.0                                ...           5 months ago
  • 0.2.0                                ...           9 months ago
  • 0.1.9                                ...           9 months ago
  • 0.1.8                                ...           a year ago
  • 0.1.6                                ...           a year ago
  • 0.1.4                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.0                                ...           a year ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 15
Last Day 0
Last Week 0
Last Month 1
Dependencies (6)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |