Re-designed Chart for React

Over the past few years, our team were satisfied with React and Redux in some projects, which are almost web applications involved to data presentation or operation. The projects need use a lot of charts which is so painful that we decided to create new chart library for React.

The traditional chart, such as highcharts or amcharts. There are rich optional types and options to be choosed, but I used them too awkward under the React. May be the chart is written by React, it may be a good idea.

So what is React advantage for write a chart library?

• We could make use of Virtual DOM and PureRender accelerate chart update.
• We could organise the code comfortable, include life cycle system and componentization.
• We could custom elements easily with custom React elements.

Fortunately, we provide the solution called Recharts. It means React combined to Charts. The main philosophies of Recharts are componentized, comfortable and customizable.

Componentized

This case is a no-brainer. That is credit for React we always write components codes. So we created more chart easily. That is a kind of chart: RadialBarChart.

Comfortable

We deploy with configuration of props. That is React concept. Here’s an example of the render function code using a line chart use-case, included CartesianGrid and Line in the chart wrapper.

<LineChart width={400} height={300} data={data}>
  <CartesianGrid stroke='#f5f5f5'/>
  <Line type='monotone' dataKey='uv' stroke='#ff7300'/>   </LineChart>

We can see option “monotone” which will make line smooth. The render algorithm comes from D3 library, which is provide such great algorithm in drawing. However, we did’t import whole D3 library, and only got the modules we needed. The d3-scale and d3-shape depended on Recharts are two small modules. You don’t write any D3 codes any more on writing chart logic.

Customizable

This is main use case for Recharts. If you are familiar with traditional chart, these always custom functions by callback. It is so chaotic that the chart logical is found in everywhere. Using React components, it is too simple to work.

For instance, I want to custom dot on line. It is only write a custom element called CustomLineDot to satisfied.

<LineChart width={400} height={300} data={data}>
  <CartesianGrid stroke=’#f5f5f5'/>
  <Line type=’monotone’ dataKey=’uv’ dot={<CustomLineDot/>} stroke=’#ff7300'/>
</LineChart>

Similarly, We could custom x axis and label of bars.

<BarChart width={600} height={300} data={data}>
  <XAxis dataKey=”name” label={<CustomAxisLabel/>}/>
  <YAxis/>
  <Bar type=”monotone” dataKey=”uv” barSize={30} fill=”#ff7300" label={<CustomBarLabel />}/>
</BarChart>

Even custom tooltip and the shape of bars!

<BarChart width={600} height={300} data={data}>
  <XAxis dataKey=”name” label={<CustomAxisLabel/>}/>
  <YAxis/>
  <Tooltip content={<CustomTooltip />}/>
  <Bar type=”monotone” dataKey=”uv” fill=”#ff7300" shape={<TriangleBar />}/>
</BarChart>

What’s the Next

1. We will support cool animation in the Recharts. Now, we created React-smooth, which is React animation library inspired by velocity and React-motion. I think this library apply to any conditions awesome.
2. We will write more detailed document. The rechart.org is contained guide and API reference.
3. The most important work will be adding more chart kinds. These charts is atomic elements. You could create more new charts.

I don’t want to Recharts is known as a chart library. IMO, custom charts by Recharts may be suitable for more visualization scene.

Cheers.