1. 组件 Line , Area , Bar , XAxis, YAxis 的 labels 支持自定义

  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" tick={renderCustomAxisTick} />
    <YAxis />
    <Bar type="monotone" dataKey="uv" barSize={30} fill="#8884d8"
      label={renderCustomBarLabel}/>
  </BarChart>
) ;

2. 组件的形状可以自定义

例如，当 <Bar /> 的属性 shape 是一个函数或者 react element 的时候，可以用来自定义柱子的形状。

const renderBarChart = (
    <XAxis dataKey="name" tick={renderCustomAxisTick} />
    <YAxis />
      shape={<TriangleBar />} />
  </BarChart>
) ;

3. Tooltip 的内容可以自定义

我们经常需要在提示浮层中展示更多的信息，这时候就可以时候自定义的 content 。

const renderBarChart = (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" tick={renderCustomAxisTick} />
    <YAxis />
    <Tooltip content={<CustomTooltip />}/>
    <Bar type="monotone" dataKey="uv" fill="#8884d8"
      shape={<TriangleBar />} />
  </BarChart>

4. 组件样式支持 svg 属性

5. Tooltip 和 Legend 支持自定义的 style

Tooltip 和 Legend 是使用 html 实现的，开放了 style 相关的 api ，当然也可以通过 css 来改变样式。

import { BarChart, Bar, XAxis, XAxis, Tooltip, Legend, CartesianGrid } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
const renderBarChart = (
  <BarChart width={600} height={300} data={data}>
    <XAxis dataKey="name" stroke="#8884d8" />
    <YAxis />
    <Tooltip wrapperStyle={{ width: 100, backgroundColor: '#ccc' }} />
    <Legend width={100} wrapperStyle={{ top: 40, right: 20, backgroundColor: '#f5f5f5', border: '1px solid #d5d5d5', borderRadius: 3, lineHeight: '40px' }} />
    <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
    <Bar type="monotone" dataKey="uv" fill="#8884d8" barSize={30} />
) ;

• uv