Banded Chart example (#296)

* Banded Chart example

* Banded Chart example: Legend to exclude entry for band data

* converted class to function component; added link to private codesandbox with the example

* fixed: export should be default not named

src/docs/exampleComponents/ComposedChart/BandedChart.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import {
+  ComposedChart,
+  Line,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  DefaultLegendContent,
+  ResponsiveContainer,
+} from 'recharts';
+
+const data = [
+  {
+    name: "Page A",
+    a: [0, 0],
+    b: 0,
+  },
+  {
+    name: "Page B",
+    a: [50, 300],
+    b: 106,
+  },
+  {
+    name: "Page C",
+    a: [150, 423],
+  },
+  {
+    name: "Page D",
+    b: 312,
+  },
+  {
+    name: "Page E",
+    a: [367, 678],
+    b: 451,
+  },
+  {
+    name: "Page F",
+    a: [305, 821],
+    b: 623,
+  },
+];
+
+export default function Example() {
+  const renderTooltipWithoutRange = ({ payload, content, ...rest }) => {
+      const newPayload = payload.filter((x) => x.dataKey !== "a");
+      return <Tooltip payload={newPayload} {...rest} />;
+  }
+
+  const renderLegendWithoutRange = ({ payload, content, ...rest }) => {
+    const newPayload = payload.filter((x) => x.dataKey !== "a");
+    return <DefaultLegendContent payload={newPayload} {...rest} />;
+  }
+
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <ComposedChart
+      width={500}
+      height={400}
+      data={data}
+      margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+      }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={renderTooltipWithoutRange} />
+        <Area
+            type="monotone"
+            dataKey="a"
+            stroke="none"
+            fill="#cccccc"
+            connectNulls
+            dot={false}
+            activeDot={false}
+        />
+        <Line type="natural" dataKey="b" stroke="#ff00ff" connectNulls />
+        <Legend content={renderLegendWithoutRange} />
+      </ComposedChart>
+    </ResponsiveContainer>
+  );
+}
+
+Example.demoUrl = 'https://codesandbox.io/p/sandbox/simple-area-chart-forked-hncq3r';

src/docs/exampleComponents/ComposedChart/index.js

@@ -3,11 +3,13 @@ import LineBarAreaComposedChart from './LineBarAreaComposedChart';
 import SameDataComposedChart from './SameDataComposedChart';
 import VerticalComposedChart from './VerticalComposedChart';
 import ScatterAndLineOfBestFit from './ScatterAndLineOfBestFit';
+import BandedChart from './BandedChart'
 
 export default {
   LineBarAreaComposedChart,
   SameDataComposedChart,
   VerticalComposedChart,
   ComposedChartWithAxisLabels,
   ScatterAndLineOfBestFit,
+  BandedChart,
 };