pass props through in more places

src/area.js

@@ -14,7 +14,7 @@ import { area } from 'd3-shape'
  * @param  props.curve - optional curve factory
  * @param  props.sx - optional sx object
  */
-const Area = ({ data, color = 'primary', curve = false, sx }) => {
+const Area = ({ data, color = 'primary', curve = false, sx, ...props }) => {
   const { x: _x, y: _y } = useChart()
 
   let generator = area()
@@ -34,6 +34,7 @@ const Area = ({ data, color = 'primary', curve = false, sx }) => {
         fill: color,
         ...sx,
       }}
+      {...props}
     />
   )
 }

src/axis.js

@@ -11,7 +11,7 @@ const styles = {
   },
 }
 
-const Axis = ({ left, right, top, bottom, sx }) => {
+const Axis = ({ left, right, top, bottom, sx, ...props }) => {
   const leftSx = useChartPadding(({ apt, pt, pb, apb, pl }) => ({
     height: `calc(100% - ${apt + pt + pb + apb}px)`,
     left: `${pl}px`,
@@ -44,6 +44,7 @@ const Axis = ({ left, right, top, bottom, sx }) => {
             ...leftSx,
             ...sx,
           }}
+          {...props}
         />
       )}
       {right && (
@@ -55,6 +56,7 @@ const Axis = ({ left, right, top, bottom, sx }) => {
             ...rightSx,
             ...sx,
           }}
+          {...props}
         />
       )}
       {bottom && (
@@ -66,6 +68,7 @@ const Axis = ({ left, right, top, bottom, sx }) => {
             ...bottomSx,
             ...sx,
           }}
+          {...props}
         />
       )}
       {top && (
@@ -77,6 +80,7 @@ const Axis = ({ left, right, top, bottom, sx }) => {
             ...topSx,
             ...sx,
           }}
+          {...props}
         />
       )}
     </>

src/circle.js

@@ -2,7 +2,7 @@ import React, { memo } from 'react'
 import { Box } from 'theme-ui'
 import { useChart } from './chart'
 
-const Circle = ({ x, y, color = 'primary', size = 10, sx }) => {
+const Circle = ({ x, y, color = 'primary', size = 10, sx, ...props }) => {
   const { x: _x, y: _y } = useChart()
 
   return (
@@ -19,6 +19,7 @@ const Circle = ({ x, y, color = 'primary', size = 10, sx }) => {
         vectorEffect: 'non-scaling-stroke',
         ...sx,
       }}
+      {...props}
     />
   )
 }

src/donut.js

@@ -11,6 +11,7 @@ const Donut = ({
   outerRadius = 50,
   color = 'primary',
   sx,
+  ...props
 }) => {
   domain = domain || [0, data.length - 1]
   range = range || [0.3, 0.9]
@@ -34,6 +35,7 @@ const Donut = ({
               fill: color,
               ...sx,
             }}
+            {...props}
           />
         )
       })}

src/grid.js

@@ -14,7 +14,7 @@ const styles = {
   },
 }
 
-const VerticalGrid = ({ values, x, sx }) => {
+const VerticalGrid = ({ values, x, sx, ...props }) => {
   return values.map((d, i) => {
     return (
       <Box
@@ -26,12 +26,13 @@ const VerticalGrid = ({ values, x, sx }) => {
           borderLeftWidth: '1px',
           ...sx,
         }}
+        {...props}
       />
     )
   })
 }
 
-const HorizontalGrid = ({ values, y, sx }) => {
+const HorizontalGrid = ({ values, y, sx, ...props }) => {
   return values.map((d, i) => {
     return (
       <Box
@@ -43,12 +44,13 @@ const HorizontalGrid = ({ values, y, sx }) => {
           width: `calc(100%)`,
           ...sx,
         }}
+        {...props}
       />
     )
   })
 }
 
-const Grid = ({ horizontal, vertical, count = 5, values, sx }) => {
+const Grid = ({ horizontal, vertical, count = 5, values, sx, ...props }) => {
   const { x, y, logx, logy } = useChart()
   const verticalSx = useChartPadding(
     ({ apt, pt, pb, apb, apl, pl, pr, apr }) => ({
@@ -77,7 +79,7 @@ const Grid = ({ horizontal, vertical, count = 5, values, sx }) => {
             ...verticalSx,
           }}
         >
-          <VerticalGrid values={values.vertical} x={x} sx={sx} />
+          <VerticalGrid values={values.vertical} x={x} sx={sx} {...props} />
         </Box>
       )}
       {horizontal && (
@@ -87,7 +89,7 @@ const Grid = ({ horizontal, vertical, count = 5, values, sx }) => {
             ...horizontalSx,
           }}
         >
-          <HorizontalGrid bottom values={values.horizontal} y={y} sx={sx} />
+          <HorizontalGrid values={values.horizontal} y={y} sx={sx} {...props} />
         </Box>
       )}
     </>

src/label.js

@@ -2,7 +2,17 @@ import React from 'react'
 import { Box } from 'theme-ui'
 import Point from './point'
 
-const Label = ({ x, y, children, align, verticalAlign, width, height, sx }) => {
+const Label = ({
+  x,
+  y,
+  children,
+  align,
+  verticalAlign,
+  width,
+  height,
+  sx,
+  ...props
+}) => {
   return (
     <Point
       x={x}
@@ -22,6 +32,7 @@ const Label = ({ x, y, children, align, verticalAlign, width, height, sx }) => {
           textAlign: align,
           ...sx,
         }}
+        {...props}
       >
         {children}
       </Box>

src/line.js

@@ -3,7 +3,14 @@ import { Box } from 'theme-ui'
 import { useChart } from './chart'
 import { line } from 'd3-shape'
 
-const Line = ({ data, color = 'primary', width = 1, curve = false, sx }) => {
+const Line = ({
+  data,
+  color = 'primary',
+  width = 1,
+  curve = false,
+  sx,
+  ...props
+}) => {
   const { x: _x, y: _y } = useChart()
 
   let generator = line()
@@ -27,6 +34,7 @@ const Line = ({ data, color = 'primary', width = 1, curve = false, sx }) => {
         vectorEffect: 'non-scaling-stroke',
         ...sx,
       }}
+      {...props}
     />
   )
 }

src/plot.js

@@ -2,7 +2,7 @@ import React from 'react'
 import { Box } from 'theme-ui'
 import useChartPadding from './utils/use-chart-padding'
 
-const Plot = ({ children, sx, mode = 'svg', square = false }) => {
+const Plot = ({ children, sx, mode = 'svg', square = false, ...props }) => {
   const responsiveSx = useChartPadding(
     ({ apt, pt, pb, apb, apl, pl, pr, apr }) => ({
       height: `calc(100% - ${apt + pt + pb + apb}px)`,
@@ -31,6 +31,7 @@ const Plot = ({ children, sx, mode = 'svg', square = false }) => {
             overflow: 'visible',
             ...sx,
           }}
+          {...props}
         >
           {children}
         </Box>

src/point.js

@@ -11,6 +11,7 @@ const Point = ({
   verticalAlign = 'top',
   width,
   height,
+  ...props
 }) => {
   const { x: _x, y: _y } = useChart()
   const responsiveSx = useChartPadding(
@@ -104,6 +105,7 @@ const Point = ({
           ...verticalPosition,
           ...flexStyles,
         }}
+        {...props}
       >
         {children}
       </Box>

src/scatter.js

@@ -2,7 +2,15 @@ import React, { memo } from 'react'
 import { Box } from 'theme-ui'
 import { useChart } from './chart'
 
-const Scatter = ({ data, x, y, color = 'primary', size = 10, sx }) => {
+const Scatter = ({
+  data,
+  x,
+  y,
+  color = 'primary',
+  size = 10,
+  sx,
+  ...props
+}) => {
   const { x: _x, y: _y } = useChart()
   x = x || ((d) => d[0])
   y = y || ((d) => d[1])
@@ -29,6 +37,7 @@ const Scatter = ({ data, x, y, color = 'primary', size = 10, sx }) => {
         vectorEffect: 'non-scaling-stroke',
         ...sx,
       }}
+      {...props}
     />
   )
 }