diff --git a/demo/components/sidenav.js b/demo/components/sidenav.js
index 87471a5..d6a2e2f 100644
--- a/demo/components/sidenav.js
+++ b/demo/components/sidenav.js
@@ -92,7 +92,11 @@ const Sidenav = ({ active, expanded }) => {
               </Box>
               <Box sx={{ my: [2] }}>
                 {contents[d].map((e) => {
-                  const normalizedName =  e.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase())
+                  const normalizedName = e.replace(
+                    /[A-Z]/g,
+                    (match, offset) =>
+                      (offset > 0 ? '-' : '') + match.toLowerCase()
+                  )
                   return (
                     <Link
                       key={e}
diff --git a/demo/pages/bar.md b/demo/pages/bar.md
index 617659f..033dcbc 100644
--- a/demo/pages/bar.md
+++ b/demo/pages/bar.md
@@ -10,14 +10,16 @@ import {
   Bar,
 } from '@carbonplan/charts'
 
-export const data = Array(11).fill(null).map((_, i) => [i, (i + 1) * 9])
+export const data = Array(11)
+  .fill(null)
+  .map((_, i) => [i, (i + 1) * 9])
 
 # Bar
 
 This is a simple bar chart.
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -31,7 +33,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -47,7 +49,7 @@ This is a simple bar chart.
 ### Horizontal bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -59,7 +61,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -73,7 +75,7 @@ This is a simple bar chart.
 ### Floating bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -85,7 +87,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -99,24 +101,30 @@ This is a simple bar chart.
 ### Multiple colors
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <Bar data={data} color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])} />
+      <Bar
+        data={data}
+        color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <Bar data={data} color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])} />
+      <Bar
+        data={data}
+        color={data.map((_, i) => ['pink', 'red', 'orange', 'yellow'][i % 4])}
+      />
     </Plot>
   </Chart>
 </Box>
diff --git a/demo/pages/stacked-bar.md b/demo/pages/stacked-bar.md
index 02416fd..2fad3d4 100644
--- a/demo/pages/stacked-bar.md
+++ b/demo/pages/stacked-bar.md
@@ -10,15 +10,18 @@ import {
   StackedBar,
 } from '@carbonplan/charts'
 
-export const data = Array(11).fill(null).map((_, i) => [i, 0, (i + 1) * 2, (i + 1) * 5, (i + 1) * 9])
-export const getRandomColor = () => ['pink', 'red', 'orange', 'yellow', 'green'][Math.floor(Math.random() * 5)]
+export const data = Array(11)
+  .fill(null)
+  .map((_, i) => [i, 0, (i + 1) * 2, (i + 1) * 5, (i + 1) * 9])
+export const getRandomColor = () =>
+  ['pink', 'red', 'orange', 'yellow', 'green'][Math.floor(Math.random() * 5)]
 
 # StackedBar
 
 This is a simple bar chart.
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -32,7 +35,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -48,7 +51,7 @@ This is a simple bar chart.
 ### Horizontal bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -60,7 +63,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[0, 100]} y={[-1, 11]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[0, 100]} y={[-1, 11]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -74,24 +77,30 @@ This is a simple bar chart.
 ### Floating bar
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data.map(([x, zero, ...yValues]) => [x, ...yValues])} color={'purple'} />
+      <StackedBar
+        data={data.map(([x, zero, ...yValues]) => [x, ...yValues])}
+        color={'purple'}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data.map(([x, zero, ...yValues]) => [x, ...yValues])} color={'purple'} />
+      <StackedBar
+        data={data.map(([x, zero, ...yValues]) => [x, ...yValues])}
+        color={'purple'}
+      />
     </Plot>
   </Chart>
 </Box>
@@ -102,7 +111,7 @@ This is a simple bar chart.
 #### Custom stack colors
 
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -114,7 +123,7 @@ This is a simple bar chart.
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
@@ -126,29 +135,37 @@ This is a simple bar chart.
 ```
 
 #### Completely customized colors
+
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data} color={data.map((d) => d.slice(2).map((_, i) => getRandomColor()))} />
+      <StackedBar
+        data={data}
+        color={data.map((d) => d.slice(2).map((_, i) => getRandomColor()))}
+      />
     </Plot>
   </Chart>
 </Box>
 
 ```jsx
 <Box sx={{ width: '100%', height: '400px' }}>
-  <Chart x={[-1, 11]} y={[0, 100]}  padding={{ left: 60, top: 50 }}>
+  <Chart x={[-1, 11]} y={[0, 100]} padding={{ left: 60, top: 50 }}>
     <Ticks left bottom />
     <TickLabels left bottom />
     <Axis left bottom />
     <Plot>
-      <StackedBar data={data} color={data.map((d) => d.slice(2).map(() => getRandomColor()))} />
+      <StackedBar
+        data={data}
+        color={data.map((d) => d.slice(2).map(() => getRandomColor()))}
+      />
     </Plot>
   </Chart>
 </Box>
 ```
 
-
-export default ({ children }) => <Section name='stacked-bar'>{children}</Section>
+export default ({ children }) => (
+  <Section name='stacked-bar'>{children}</Section>
+)