react-raphael-chart v0.8.0

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