react-raphael-chart

so easy, create charts with react-raphael!

Install

# or specify the externals in webpack config
npm install --save raphael
# install react-raphael-chart in your react-raphael-chart project
npm install  --save react-raphael-chart

API

PieChart

All props

• color string arc fill color of PieChart
• background string background fill color of PieChart
• radius number radius of PieChart's circle
• center object radius of PieChart's circle
• label number text of PieChart's label
• fontsize object fontsize of PieChart's label
• total string total of PieChart's data
• value number value of PieChart's data
• width number width of PieChart
• height number width of PieChart
• style object style of PieChart's container
• className string className of PieChart's container
• animate boolean animation of PieChart
• repeat boolean repeat the animation

DoughnutChart

All props

• color string arc fill color of DoughnutChart
• background string background fill color of DoughnutChart
• radius number radius of DoughnutChart's circle
• center object radius of DoughnutChart's circle
• thinckness number thinckness of DoughnutChart's circle
• label number text of DoughnutChart's label
• fontsize object fontsize of DoughnutChart's label
• total string total of DoughnutChart's data
• value number value of DoughnutChart's data
• width number width of DoughnutChart
• height number width of DoughnutChart
• style object style of DoughnutChart's container
• className string className of DoughnutChart's container
• animate boolean animation of DoughnutChart
• repeat boolean repeat the animation

LineChart ( VoronoiLineChart )

• width number width of LineChart
• height number width of LineChart
• serises array serises of LineChart
  • data array data of LineChart's serise
    • x number x of LineChart's serise data
    • y number x of LineChart's serise data
  • color string color of LineChart's serise
  • thickness number thickness of LineChart's serise
  • curve boolean curve of LineChart's serise
• xAxis object xAxis of LineChart
  • min number min value of xAxis
  • max number max value of xAxis
  • interval number interval value of xAxis
  • formatter function title formatter of xAxis { data: object }
  • height number height of xAxis
• yAxis object yAxis of LineChart
  • min number min value of yAxis
  • max number max value of yAxis
  • interval number interval value of yAxis
  • formatter function title formatter of yAxis { data: object }
  • width number width of yAxis
• grid object grid of LineChart
  • color string color of LineChart's grid
  • thickness number thickness of LineChart's serise
  • showYGrid boolean show y axis grid of LineChart
  • showXGrid boolean show y axis grid of LineChart
• animate boolean animation of LineChart
• repeat boolean repeat the LineChart

BarChart

• width number width of BarChart
• height number width of BarChart
• serises array serises of BarChart
  • data array data of BarChart's serise
    • x number x of BarChart's serise data
    • y number x of BarChart's serise data
  • color string color of BarChart's serise
  • hoverColor string hover color of BarChart's serise
• xAxis object xAxis of BarChart
  • min number min value of xAxis
  • max number max value of xAxis
  • interval number interval value of xAxis
  • formatter function title formatter of xAxis { data: object }
  • height number height of xAxis
• yAxis object yAxis of BarChart
  • min number min value of yAxis
  • max number max value of yAxis
  • interval number interval value of yAxis
  • formatter function title formatter of yAxis { data: object }
  • width number width of yAxis
• grid object grid of BarChart
  • color string color of BarChart's grid
  • thickness number thickness of BarChart's serise
  • showYGrid boolean show y axis grid of BarChart
  • showXGrid boolean show y axis grid of BarChart
• barWidth number max width of BarChart's bar
• fontSize number font size of BarChart's text
• textAutoHide boolean auto hide of BarChart's text

Develop

1. clone the repository

    git clone https://github.com/liuhong1happy/react-raphael-chart.git
   

2. install dependency package;

    npm install 
   

3. run example

    npm run example
   

4. build

    npm run build
   

Use

Now , you can see example !

Contact

Email: liuhong1.happy@163.com