include activeBar in Bar docs (#278)

recharts · Oct 15, 2023 · 1530ffa · 1530ffa
1 parent 9b4a0d4
commit 1530ffa
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/docs/api/Bar.js b/src/docs/api/Bar.js
@@ -157,6 +157,29 @@ export default {
         },
       ],
     },
+    {
+      name: 'activeBar',
+      type: 'Boolean | Object | ReactElement | Function',
+      defaultVal: 'true',
+      isOptional: true,
+      desc: {
+        'en-US':
+          'The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object. If passed a ReactElement, the option can be the custom active bar element. If passed a function, the function will be called to render a customized active bar.',
+        'zh-CN': '当用户输入柱形图且该图表有工具提示时，将显示活动柱形图。如果设置为 false，则不会绘制活动条形图。如果设置为 true，将使用内部计算的道具绘制活动条形图。如果传递的是一个对象，则将绘制活动条形图，并将内部计算的道具与传递对象的键值对合并。如果传递的是 ReactElement，该选项可以是自定义的活动条元素。如果传递的是函数，则将调用该函数来渲染自定义的活动条。'
+      },
+      format: [
+        '<Bar dataKey="value" activeBar={false} />',
+        '<Bar dataKey="value" activeBar={{ stroke: \'red\', strokeWidth: 2 }} />',
+        '<Bar dataKey="value" activeBar={<CustomizedBar />} />',
+        '<Bar dataKey="value" activeBar={renderBar} />'
+      ],
+      examples: [
+        {
+          name: 'A bar chart with active bar',
+          url: '/examples/SimpleBarChart',
+        },
+      ],
+    },
     {
       name: 'stackId',
       type: 'String | Number',

diff --git a/src/docs/exampleComponents/BarChart/SimpleBarChart.js b/src/docs/exampleComponents/BarChart/SimpleBarChart.js
@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, Rectangle, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
 
 const data = [
   {
@@ -68,8 +68,8 @@ export default class Example extends PureComponent {
           <YAxis />
           <Tooltip />
           <Legend />
-          <Bar dataKey="pv" fill="#8884d8" />
-          <Bar dataKey="uv" fill="#82ca9d" />
+          <Bar dataKey="pv" fill="#8884d8" activeBar={<Rectangle fill="pink" stroke="blue" />} />
+          <Bar dataKey="uv" fill="#82ca9d" activeBar={<Rectangle fill="gold" stroke="purple" />} />
         </BarChart>
       </ResponsiveContainer>
     );