[gallery] use @vx/gradient

cule · Apr 23, 2017 · 73d8899 · 73d8899
1 parent 82701d2
commit 73d8899
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/packages/vx-demo/components/charts/SimpleAreaChart.js b/packages/vx-demo/components/charts/SimpleAreaChart.js
@@ -7,6 +7,7 @@ import Shape from '@vx/shape';
 import Grid from '@vx/grid';
 import Text from '@vx/text';
 import Pattern from '@vx/pattern';
+import Gradient from '@vx/gradient';
 import { extent, max } from 'd3-array';
 
 function numTicksForHeight(height) {
@@ -50,12 +51,7 @@ export default ({
 
   return (
     <svg height={height} width={width}>
-      <defs>
-        <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
-          <stop offset="0%"   stopColor="rgba(181, 49, 206, 1.000)"/>
-          <stop offset="100%" stopColor="rgba(1, 179, 239, 1.000)"/>
-        </linearGradient>
-      </defs>
+      <Gradient.OrangeRed id="pinkblue" />
       <Group top={margin.top} left={margin.left}>
         <Grid.Rows
           scale={yStockScale}
@@ -70,8 +66,8 @@ export default ({
           x={xStock}
           y={yStock}
           strokeWidth={2}
-          stroke={'url(#linear)'}
-          fill={'url(#linear)'}
+          stroke={'url(#pinkblue)'}
+          fill={'url(#pinkblue)'}
         />
       </Group>
       <Axis.AxisBottom

diff --git a/packages/vx-demo/package.json b/packages/vx-demo/package.json
@@ -21,6 +21,7 @@
     "@vx/brush": "0.0.100",
     "@vx/curve": "0.0.100",
     "@vx/glyph": "^0.0.49",
+    "@vx/gradient": "0.0.101",
     "@vx/grid": "^0.0.49",
     "@vx/group": "0.0.49",
     "@vx/marker": "^0.0.60",