bar chart gradient example in docs (#268)

Co-authored-by: Isaac Ezer <[email protected]>
spotify · Sep 22, 2020 · 17a07bd · 17a07bd
1 parent e34c8ac
commit 17a07bd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/docs/src/docs/BarChart/BarChartDocs.js b/docs/src/docs/BarChart/BarChartDocs.js
@@ -10,6 +10,11 @@ const examples = [
     label: 'Basic BarChart',
     codeText: require('./examples/BarChart.js.example').default,
   },
+  {
+    id: 'gradient',
+    label: 'BarChart with Linear Gradient',
+    codeText: require('./examples/BarChartLinearGradient.js.example').default,
+  },
 ];
 
 export default class BarChartExamples extends React.Component {

diff --git a/docs/src/docs/BarChart/examples/BarChartLinearGradient.js.example b/docs/src/docs/BarChart/examples/BarChartLinearGradient.js.example
@@ -0,0 +1,32 @@
+const BarChartWithDefs = (props) => {
+  const data = [
+    {x: 0, y: 80},
+    {x: 5, y: 60},
+    {x: 10, y: 90},
+    {x: 15, y: 30},
+  ];
+  return <div>
+  <svg width="0" height="0" style={{ position: 'absolute' }}>
+    <defs>
+      <linearGradient id="Gradient" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stopColor="blue" />
+        <stop offset="50%" stopColor="white" />
+        <stop offset="100%" stopColor="red" />
+      </linearGradient>
+    </defs>
+  </svg>
+  <XYPlot width={400} height={300}>
+    <XAxis showGrid={false} title="Days since Zombiepocalypse" />
+    <YAxis title="Zombie Attacks"/>
+    <BarChart
+      barStyle={{fill: "url(#Gradient)"}}
+      data={data}
+      x={d => d.x}
+      y={d => d.y}
+      barThickness={40}
+    />
+  </XYPlot>
+</div>
+};
+
+ReactDOM.render(<BarChartWithDefs />, mountNode);