diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
index d42b5debf..c22cd3739 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/Example.tsx
@@ -1,6 +1,13 @@
 import React from 'react';
 import cityTemperature, { CityTemperature } from '@visx/mock-data/lib/mocks/cityTemperature';
-import { AnimatedAxis, AnimatedGrid, DataProvider, LineSeries, XYChart } from '@visx/xychart';
+import {
+  AnimatedAxis,
+  AnimatedGrid,
+  DataProvider,
+  BarSeries,
+  LineSeries,
+  XYChart,
+} from '@visx/xychart';
 import ExampleControls from './ExampleControls';
 import CustomChartBackground from './CustomChartBackground';
 
@@ -9,53 +16,72 @@ type Props = {
   height: number;
 };
 
-const xScaleConfig = { type: 'time' } as const;
+const xScaleConfig = { type: 'band', paddingInner: 0.3 } as const;
 const yScaleConfig = { type: 'linear' } as const;
 const numTicks = 4;
-const data = cityTemperature.slice(0, 100);
-const getDate = (d: CityTemperature) => new Date(d.date);
+const data = cityTemperature.slice(150, 225);
+const getDate = (d: CityTemperature) => d.date; // new Date(d.date);
 const getSfTemperature = (d: CityTemperature) => Number(d['San Francisco']);
+const getNyTemperature = (d: CityTemperature) => Number(d['New York']);
 
 export default function Example({ height }: Props) {
   return (
     <ExampleControls>
       {({
+        animationTrajectory,
+        renderBarSeries,
+        renderHorizontally,
+        renderLineSeries,
+        showGridColumns,
+        showGridRows,
         theme,
         xAxisOrientation,
         yAxisOrientation,
-        showGridRows,
-        showGridColumns,
-        animationTrajectory,
       }) => (
-        <DataProvider theme={theme} xScale={xScaleConfig} yScale={yScaleConfig}>
+        <DataProvider
+          theme={theme}
+          xScale={renderHorizontally ? yScaleConfig : xScaleConfig}
+          yScale={renderHorizontally ? xScaleConfig : yScaleConfig}
+        >
           <XYChart height={Math.min(400, height)}>
             <CustomChartBackground />
+            <AnimatedGrid
+              key={`grid-${animationTrajectory}`} // force animate on update
+              rows={showGridRows}
+              columns={showGridColumns}
+              animationTrajectory={animationTrajectory}
+              numTicks={numTicks}
+            />
+            {renderBarSeries && (
+              <BarSeries
+                dataKey="ny"
+                data={data}
+                xAccessor={renderHorizontally ? getNyTemperature : getDate}
+                yAccessor={renderHorizontally ? getDate : getNyTemperature}
+                horizontal={renderHorizontally}
+              />
+            )}
+            {renderLineSeries && (
+              <LineSeries
+                dataKey="sf"
+                data={data}
+                xAccessor={renderHorizontally ? getSfTemperature : getDate}
+                yAccessor={renderHorizontally ? getDate : getSfTemperature}
+              />
+            )}
             <AnimatedAxis
-              key={`xaxis-${animationTrajectory}`} // force animate on update
-              orientation={xAxisOrientation}
+              key={`time-axis-${animationTrajectory}-${renderHorizontally}`}
+              orientation={renderHorizontally ? yAxisOrientation : xAxisOrientation}
               numTicks={numTicks}
               animationTrajectory={animationTrajectory}
             />
             <AnimatedAxis
-              key={`yaxis-${animationTrajectory}`}
+              key={`temp-axis-${animationTrajectory}-${renderHorizontally}`}
               label="Temperature (°F)"
-              orientation={yAxisOrientation}
+              orientation={renderHorizontally ? xAxisOrientation : yAxisOrientation}
               numTicks={numTicks}
               animationTrajectory={animationTrajectory}
             />
-            <AnimatedGrid
-              key={`grid-${animationTrajectory}`}
-              rows={showGridRows}
-              columns={showGridColumns}
-              animationTrajectory={animationTrajectory}
-              numTicks={numTicks}
-            />
-            <LineSeries
-              dataKey="line"
-              data={data}
-              xAccessor={getDate}
-              yAccessor={getSfTemperature}
-            />
           </XYChart>
         </DataProvider>
       )}
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
index 010db735b..cb57f221d 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/ExampleControls.tsx
@@ -6,6 +6,9 @@ import customTheme from './customTheme';
 
 type ProvidedProps = {
   animationTrajectory: AnimationTrajectory;
+  renderHorizontally: boolean;
+  renderBarSeries: boolean;
+  renderLineSeries: boolean;
   showGridColumns: boolean;
   showGridRows: boolean;
   theme: XYChartTheme;
@@ -24,11 +27,17 @@ export default function ExampleControls({ children }: ControlsProps) {
   const [showGridRows, showGridColumns] = gridProps;
   const [xAxisOrientation, setXAxisOrientation] = useState<'top' | 'bottom'>('bottom');
   const [yAxisOrientation, setYAxisOrientation] = useState<'left' | 'right'>('right');
+  const [renderHorizontally, setRenderHorizontally] = useState(false);
+  const [renderBarSeries, setRenderBarSeries] = useState(true);
+  const [renderLineSeries, setRenderLineSeries] = useState(true);
 
   return (
     <>
       {children({
         animationTrajectory,
+        renderBarSeries,
+        renderHorizontally,
+        renderLineSeries,
         showGridColumns,
         showGridRows,
         theme,
@@ -65,6 +74,27 @@ export default function ExampleControls({ children }: ControlsProps) {
           </label>
         </div>
 
+        {/** series orientation */}
+        <div>
+          <strong>series orientation</strong>
+          <label>
+            <input
+              type="radio"
+              onChange={() => setRenderHorizontally(false)}
+              checked={!renderHorizontally}
+            />{' '}
+            vertical
+          </label>
+          <label>
+            <input
+              type="radio"
+              onChange={() => setRenderHorizontally(true)}
+              checked={renderHorizontally}
+            />{' '}
+            horizontal
+          </label>
+        </div>
+
         {/** axes */}
         <div>
           <strong>axes</strong>
@@ -175,6 +205,26 @@ export default function ExampleControls({ children }: ControlsProps) {
             from max
           </label>
         </div>
+        {/** series */}
+        <div>
+          <strong>series</strong>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => setRenderLineSeries(!renderLineSeries)}
+              checked={renderLineSeries}
+            />{' '}
+            line
+          </label>
+          <label>
+            <input
+              type="checkbox"
+              onChange={() => setRenderBarSeries(!renderBarSeries)}
+              checked={renderBarSeries}
+            />{' '}
+            bar
+          </label>
+        </div>
       </div>
       <style jsx>{`
         .controls {
diff --git a/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts b/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
index f05657ddd..201cd9307 100644
--- a/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
+++ b/packages/visx-demo/src/sandboxes/visx-xychart/customTheme.ts
@@ -2,7 +2,7 @@ import { buildChartTheme } from '@visx/xychart';
 
 export default buildChartTheme({
   backgroundColor: '#f09ae9',
-  colors: ['#6a097d', '#c060a1', '#ffc1fa'],
+  colors: ['rgba(255,231,143,0.8)', '#6a097d', '#ffc1fa'],
   gridColor: '#336d88',
   gridColorDark: '#1d1b38',
   labelStyles: { fill: '#1d1b38' },
diff --git a/packages/visx-react-spring/src/axis/AnimatedTicks.tsx b/packages/visx-react-spring/src/axis/AnimatedTicks.tsx
index 9105d6f01..8536919e4 100644
--- a/packages/visx-react-spring/src/axis/AnimatedTicks.tsx
+++ b/packages/visx-react-spring/src/axis/AnimatedTicks.tsx
@@ -20,7 +20,7 @@ export default function AnimatedTicks<Scale extends AxisScale>({
   ticks,
   animationTrajectory,
 }: TicksRendererProps<Scale> & { animationTrajectory?: AnimationTrajectory }) {
-  const animatedTicks = useTransition(ticks, tick => `${tick.value}-${horizontal}`, {
+  const animatedTicks = useTransition(ticks, tick => `${tick.value}`, {
     unique: true,
     ...useLineTransitionConfig({ scale, animateXOrY: horizontal ? 'x' : 'y', animationTrajectory }),
   });
@@ -39,7 +39,7 @@ export default function AnimatedTicks<Scale extends AxisScale>({
           index,
         ) => {
           const tickLabelProps = allTickLabelProps[index] ?? allTickLabelProps[0] ?? {};
-          return (
+          return item == null || key == null ? null : (
             <animated.g
               key={key}
               className={cx('visx-axis-tick', tickClassName)}
@@ -70,7 +70,7 @@ export default function AnimatedTicks<Scale extends AxisScale>({
                 )}
                 opacity={opacity}
               >
-                <Text {...tickLabelProps}>{item.formattedValue}</Text>
+                <Text {...tickLabelProps}>{item?.formattedValue}</Text>
               </animated.g>
             </animated.g>
           );
diff --git a/packages/visx-xychart/src/classes/DataRegistry.ts b/packages/visx-xychart/src/classes/DataRegistry.ts
index 44e0d34c1..fe53bcdb8 100644
--- a/packages/visx-xychart/src/classes/DataRegistry.ts
+++ b/packages/visx-xychart/src/classes/DataRegistry.ts
@@ -5,7 +5,7 @@ import { DataRegistryEntry } from '../types/data';
 export default class DataRegistry<
   XScale extends AxisScale,
   YScale extends AxisScale,
-  Datum = unknown
+  Datum extends object
 > {
   private registry: { [key: string]: DataRegistryEntry<XScale, YScale, Datum> } = {};
 
@@ -21,10 +21,9 @@ export default class DataRegistry<
     entries.forEach(currEntry => {
       if (currEntry.key in this.registry && this.registry[currEntry.key] != null) {
         console.debug('Overriding data registry key', currEntry.key);
-        this.registryKeys = this.registryKeys.filter(key => key !== currEntry.key);
       }
       this.registry[currEntry.key] = currEntry;
-      this.registryKeys.push(currEntry.key);
+      this.registryKeys = Object.keys(this.registry);
     });
   }
 
@@ -33,7 +32,7 @@ export default class DataRegistry<
     const keys = Array.isArray(keyOrKeys) ? keyOrKeys : [keyOrKeys];
     keys.forEach(currKey => {
       delete this.registry[currKey];
-      this.registryKeys = this.registryKeys.filter(key => key !== currKey);
+      this.registryKeys = Object.keys(this.registry);
     });
   }
 
diff --git a/packages/visx-xychart/src/components/series/BarSeries.tsx b/packages/visx-xychart/src/components/series/BarSeries.tsx
new file mode 100644
index 000000000..4cd6d0dca
--- /dev/null
+++ b/packages/visx-xychart/src/components/series/BarSeries.tsx
@@ -0,0 +1,92 @@
+import React, { useContext, useCallback, useMemo } from 'react';
+import { AxisScale } from '@visx/axis';
+import DataContext from '../../context/DataContext';
+import { SeriesProps } from '../../types';
+import withRegisteredData, { WithRegisteredDataProps } from '../../enhancers/withRegisteredData';
+import getScaledValueFactory from '../../utils/getScaledValueFactory';
+import isValidNumber from '../../typeguards/isValidNumber';
+import getScaleBandwidth from '../../utils/getScaleBandwidth';
+
+type BarSeriesProps<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+> = SeriesProps<XScale, YScale, Datum> & {
+  /** Whether bars should be rendered horizontally instead of vertically. */
+  horizontal?: boolean;
+  /**
+   * Specify bar padding when bar thickness does not come from a `band` scale.
+   * Accepted values are [0, 1], 0 = no padding, 1 = no bar, defaults to 0.1.
+   */
+  barPadding?: number;
+};
+
+// Fallback bandwidth estimate assumes no missing data values (divides chart space by # datum)
+const getFallbackBandwidth = (fullBarWidth: number, barPadding: number) =>
+  // clamp padding to [0, 1], bar thickness = (1-padding) * availableSpace
+  fullBarWidth * (1 - Math.min(1, Math.max(0, barPadding)));
+
+function BarSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
+  barPadding = 0.1,
+  data,
+  dataKey,
+  horizontal,
+  xAccessor,
+  xScale,
+  yAccessor,
+  yScale,
+}: BarSeriesProps<XScale, YScale, Datum> & WithRegisteredDataProps<XScale, YScale, Datum>) {
+  const { colorScale, theme, innerWidth = 0, innerHeight = 0 } = useContext(DataContext);
+  const getScaledX = useCallback(getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+  const getScaledY = useCallback(getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
+  const [xMin, xMax] = xScale.range().map(Number);
+  const [yMax, yMin] = yScale.range().map(Number);
+
+  const scaleBandwidth = getScaleBandwidth(horizontal ? yScale : xScale);
+  const barThickness =
+    scaleBandwidth ||
+    getFallbackBandwidth((horizontal ? innerHeight : innerWidth) / data.length, barPadding);
+
+  // try to figure out the 0 baseline for correct rendering of negative values
+  // we aren't sure if these are numeric scales or not ahead of time
+  const maybeXZero = xScale(0);
+  const maybeYZero = yScale(0);
+  const xZeroPosition = isValidNumber(maybeXZero)
+    ? // if maybeXZero _is_ a number, but the scale is not clamped and it's outside the domain
+      // fallback to the scale's minimum
+      Math.max(maybeXZero, Math.min(xMin, xMax))
+    : Math.min(xMin, xMax);
+  const yZeroPosition = isValidNumber(maybeYZero)
+    ? Math.min(maybeYZero, Math.max(yMin, yMax))
+    : Math.max(yMin, yMax);
+
+  const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
+
+  const bars = useMemo(() => {
+    const xOffset = horizontal ? 0 : -barThickness / 2;
+    const yOffset = horizontal ? -barThickness / 2 : 0;
+    return data.map(datum => {
+      const x = getScaledX(datum) + xOffset;
+      const y = getScaledY(datum) + yOffset;
+      const barLength = horizontal ? x - xZeroPosition : y - yZeroPosition;
+
+      return {
+        x: horizontal ? xZeroPosition + Math.min(0, barLength) : x,
+        y: horizontal ? y : yZeroPosition + Math.min(0, barLength),
+        width: horizontal ? Math.abs(barLength) : barThickness,
+        height: horizontal ? barThickness : Math.abs(barLength),
+        fill: color, // @TODO allow prop overriding
+      };
+    });
+  }, [barThickness, color, data, getScaledX, getScaledY, horizontal, xZeroPosition, yZeroPosition]);
+
+  return (
+    <g className="vx-bar-series">
+      {bars.map(({ x, y, width, height, fill }, i) => (
+        <rect key={i} x={x} y={y} width={width} height={height} fill={fill} />
+      ))}
+    </g>
+  );
+}
+
+export default withRegisteredData(BarSeries);
diff --git a/packages/visx-xychart/src/components/series/LineSeries.tsx b/packages/visx-xychart/src/components/series/LineSeries.tsx
index 746a3bd58..083b71d39 100644
--- a/packages/visx-xychart/src/components/series/LineSeries.tsx
+++ b/packages/visx-xychart/src/components/series/LineSeries.tsx
@@ -1,55 +1,29 @@
-import React, { useContext, useCallback, useEffect } from 'react';
+import React, { useContext, useCallback } from 'react';
 import LinePath from '@visx/shape/lib/shapes/LinePath';
-import { ScaleInput } from '@visx/scale';
 import { AxisScale } from '@visx/axis';
 import DataContext from '../../context/DataContext';
-import isValidNumber from '../../typeguards/isValidNumber';
+import { SeriesProps } from '../../types';
+import withRegisteredData, { WithRegisteredDataProps } from '../../enhancers/withRegisteredData';
+import getScaledValueFactory from '../../utils/getScaledValueFactory';
 
-type LineSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum> = {
-  dataKey: string;
-  data: Datum[];
-  xAccessor: (d: Datum) => ScaleInput<XScale>;
-  yAccessor: (d: Datum) => ScaleInput<YScale>;
-};
+type LineSeriesProps<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+> = SeriesProps<XScale, YScale, Datum>;
 
-export default function LineSeries<XScale extends AxisScale, YScale extends AxisScale, Datum>({
+function LineSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
   data,
+  dataKey,
   xAccessor,
+  xScale,
   yAccessor,
-  dataKey,
+  yScale,
   ...lineProps
-}: LineSeriesProps<XScale, YScale, Datum>) {
-  const { xScale, yScale, colorScale, dataRegistry, theme } = useContext(DataContext);
-
-  // register data on mount
-  // @TODO(chris) make this easier with HOC
-  useEffect(() => {
-    if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
-    return () => dataRegistry?.unregisterData(dataKey);
-  }, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
-
-  const getScaledX = useCallback(
-    (d: Datum) => {
-      const x = xScale?.(xAccessor(d));
-      return isValidNumber(x)
-        ? x + (xScale && 'bandwidth' in xScale ? xScale?.bandwidth?.() ?? 0 : 0) / 2
-        : NaN;
-    },
-    [xScale, xAccessor],
-  );
-
-  const getScaledY = useCallback(
-    (d: Datum) => {
-      const y = yScale?.(yAccessor(d));
-      return isValidNumber(y)
-        ? y + (yScale && 'bandwidth' in yScale ? yScale?.bandwidth?.() ?? 0 : 0) / 2
-        : NaN;
-    },
-    [yScale, yAccessor],
-  );
-
-  if (!data || !xAccessor || !yAccessor) return null;
-
+}: LineSeriesProps<XScale, YScale, Datum> & WithRegisteredDataProps<XScale, YScale, Datum>) {
+  const { colorScale, theme } = useContext(DataContext);
+  const getScaledX = useCallback(getScaledValueFactory(xScale, xAccessor), [xScale, xAccessor]);
+  const getScaledY = useCallback(getScaledValueFactory(yScale, yAccessor), [yScale, yAccessor]);
   const color = colorScale?.(dataKey) ?? theme?.colors?.[0] ?? '#222';
 
   return (
@@ -63,3 +37,5 @@ export default function LineSeries<XScale extends AxisScale, YScale extends Axis
     />
   );
 }
+
+export default withRegisteredData(LineSeries);
diff --git a/packages/visx-xychart/src/enhancers/withRegisteredData.tsx b/packages/visx-xychart/src/enhancers/withRegisteredData.tsx
new file mode 100644
index 000000000..efe138cc1
--- /dev/null
+++ b/packages/visx-xychart/src/enhancers/withRegisteredData.tsx
@@ -0,0 +1,69 @@
+import React, { useContext, useEffect } from 'react';
+import { AxisScale } from '@visx/axis';
+import DataContext from '../context/DataContext';
+import { DataContextType, SeriesProps } from '../types';
+
+export type WithRegisteredDataProps<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+> = Pick<DataContextType<XScale, YScale, Datum>, 'xScale' | 'yScale'>;
+
+/**
+ * An HOC that handles registering the Series's data and renders the
+ * `BaseSeriesComponent`
+ * - only if x and y scales are available in context, and
+ * - overrides `props.data/xAccessor/yAccessor` with the values from context.
+ * This is useful for avoiding nasty syntax with undefined scales when using
+ * hooks, and ensures that data + scales are always matched in the case of
+ * prop changes, etc.
+ */
+export default function withRegisteredData<
+  BaseComponentProps extends SeriesProps<AxisScale, AxisScale, object>
+>(BaseSeriesComponent: React.ComponentType<BaseComponentProps>) {
+  function WrappedComponent<XAxis extends AxisScale, YAxis extends AxisScale, Datum extends object>(
+    // WrappedComponent props include SeriesProps with appropriate generics
+    // and any props in BaseComponentProps that are not in WithRegisteredDataProps
+    props: SeriesProps<XAxis, YAxis, Datum> &
+      Omit<
+        BaseComponentProps,
+        keyof SeriesProps<XAxis, YAxis, Datum> | keyof WithRegisteredDataProps<XAxis, YAxis, Datum>
+      >,
+  ) {
+    const { dataKey, data, xAccessor, yAccessor } = props;
+    const { xScale, yScale, dataRegistry } = useContext(DataContext) as DataContextType<
+      XAxis,
+      YAxis,
+      Datum
+    >;
+
+    useEffect(() => {
+      if (dataRegistry) dataRegistry.registerData({ key: dataKey, data, xAccessor, yAccessor });
+      return () => dataRegistry?.unregisterData(dataKey);
+    }, [dataRegistry, dataKey, data, xAccessor, yAccessor]);
+
+    const registryEntry = dataRegistry?.get(dataKey);
+
+    // if scales or data are not available in context, render nothing
+    if (!xScale || !yScale || !registryEntry) return null;
+
+    // TODO coercion might be avoidable with variadic tuples in TS 4
+    const BaseComponent = (BaseSeriesComponent as unknown) as React.ComponentType<
+      SeriesProps<XAxis, YAxis, Datum> & WithRegisteredDataProps<XAxis, YAxis, Datum>
+    >;
+
+    // otherwise pass props + over-write data/accessors
+    return (
+      <BaseComponent
+        {...props}
+        xScale={xScale}
+        yScale={yScale}
+        data={registryEntry.data}
+        xAccessor={registryEntry.xAccessor}
+        yAccessor={registryEntry.yAccessor}
+      />
+    );
+  }
+
+  return WrappedComponent;
+}
diff --git a/packages/visx-xychart/src/hooks/useDataRegistry.ts b/packages/visx-xychart/src/hooks/useDataRegistry.ts
index ba10d16e9..5d6c000da 100644
--- a/packages/visx-xychart/src/hooks/useDataRegistry.ts
+++ b/packages/visx-xychart/src/hooks/useDataRegistry.ts
@@ -1,12 +1,30 @@
 import { AxisScale } from '@visx/axis';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import DataRegistry from '../classes/DataRegistry';
 
-/** Hook that returns a constant instance of a DataRegistry.  */
+/** Hook that returns an API equivalent to DataRegistry but which updates as needed for use as a hook. */
 export default function useDataRegistry<
   XScale extends AxisScale,
   YScale extends AxisScale,
-  Datum = unknown
+  Datum extends object
 >() {
-  return useMemo(() => new DataRegistry<XScale, YScale, Datum>(), []);
+  const [, forceUpdate] = useState(Math.random());
+  const privateRegistry = useMemo(() => new DataRegistry<XScale, YScale, Datum>(), []);
+
+  return useMemo(
+    () => ({
+      registerData: (...params: Parameters<typeof DataRegistry.prototype.registerData>) => {
+        privateRegistry.registerData(...params);
+        forceUpdate(Math.random());
+      },
+      unregisterData: (...params: Parameters<typeof DataRegistry.prototype.unregisterData>) => {
+        privateRegistry.unregisterData(...params);
+        forceUpdate(Math.random());
+      },
+      entries: () => privateRegistry.entries(),
+      get: (key: string) => privateRegistry.get(key),
+      keys: () => privateRegistry.keys(),
+    }),
+    [privateRegistry],
+  );
 }
diff --git a/packages/visx-xychart/src/hooks/useScales.ts b/packages/visx-xychart/src/hooks/useScales.ts
index 48e0adbc6..57988ce98 100644
--- a/packages/visx-xychart/src/hooks/useScales.ts
+++ b/packages/visx-xychart/src/hooks/useScales.ts
@@ -1,5 +1,5 @@
 import { AxisScaleOutput, AxisScale } from '@visx/axis';
-import { ScaleConfig, NumberLike, createScale, ScaleInput } from '@visx/scale';
+import { ScaleConfig, createScale, ScaleInput } from '@visx/scale';
 import { extent as d3Extent } from 'd3-array';
 import { useMemo } from 'react';
 import DataRegistry from '../classes/DataRegistry';
@@ -8,7 +8,7 @@ import DataRegistry from '../classes/DataRegistry';
 export default function useScales<
   XScale extends AxisScale,
   YScale extends AxisScale,
-  Datum = unknown
+  Datum extends object
 >({
   xScaleConfig,
   yScaleConfig,
@@ -18,7 +18,7 @@ export default function useScales<
 }: {
   xScaleConfig: ScaleConfig<AxisScaleOutput>;
   yScaleConfig: ScaleConfig<AxisScaleOutput>;
-  dataRegistry: DataRegistry<XScale, YScale, Datum>;
+  dataRegistry: Omit<DataRegistry<XScale, YScale, Datum>, 'registry' | 'registryKeys'>;
   xRange: [number, number];
   yRange: [number, number];
 }) {
@@ -40,10 +40,7 @@ export default function useScales<
     );
 
     const xType = xScaleConfig.type;
-    const xDomain =
-      xType === 'band' || xType === 'ordinal'
-        ? xValues
-        : (d3Extent(xValues as NumberLike[]) as XScaleInput[]);
+    const xDomain = xType === 'band' || xType === 'ordinal' ? xValues : d3Extent(xValues);
 
     xScale.range(xScaleConfig.range || [xMin, xMax]);
     xScale.domain(xScaleConfig.domain || xDomain);
@@ -70,10 +67,7 @@ export default function useScales<
     );
 
     const yType = yScaleConfig.type;
-    const yDomain =
-      yType === 'band' || yType === 'ordinal'
-        ? yValues
-        : (d3Extent(yValues as NumberLike[]) as YScaleInput[]);
+    const yDomain = yType === 'band' || yType === 'ordinal' ? yValues : d3Extent(yValues);
 
     yScale.range(yScaleConfig.range || [yMin, yMax]);
     yScale.domain(yScaleConfig.domain || yDomain);
diff --git a/packages/visx-xychart/src/index.ts b/packages/visx-xychart/src/index.ts
index dc029ee19..40ffb5a32 100644
--- a/packages/visx-xychart/src/index.ts
+++ b/packages/visx-xychart/src/index.ts
@@ -1,11 +1,14 @@
 // components
 export { default as XYChart } from './components/XYChart';
-export { default as LineSeries } from './components/series/LineSeries';
 export { default as Axis } from './components/axis/Axis';
 export { default as AnimatedAxis } from './components/axis/AnimatedAxis';
 export { default as Grid } from './components/grid/Grid';
 export { default as AnimatedGrid } from './components/grid/AnimatedGrid';
 
+// series components
+export { default as BarSeries } from './components/series/BarSeries';
+export { default as LineSeries } from './components/series/LineSeries';
+
 // context
 export { default as ThemeContext } from './context/ThemeContext';
 export { default as DataContext } from './context/DataContext';
diff --git a/packages/visx-xychart/src/providers/DataProvider.tsx b/packages/visx-xychart/src/providers/DataProvider.tsx
index 74e487113..28139495c 100644
--- a/packages/visx-xychart/src/providers/DataProvider.tsx
+++ b/packages/visx-xychart/src/providers/DataProvider.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ScaleConfig, ScaleConfigToD3Scale } from '@visx/scale';
 import React, { useContext, useMemo } from 'react';
 import createOrdinalScale from '@visx/scale/lib/scales/ordinal';
@@ -11,8 +12,8 @@ import useScales from '../hooks/useScales';
 
 /** Props that can be passed to initialize/update the provider config. */
 export type DataProviderProps<
-  XScaleConfig extends ScaleConfig<AxisScaleOutput>,
-  YScaleConfig extends ScaleConfig<AxisScaleOutput>
+  XScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>,
+  YScaleConfig extends ScaleConfig<AxisScaleOutput, any, any>
 > = {
   theme?: XYChartTheme;
   xScale: XScaleConfig;
@@ -23,7 +24,7 @@ export type DataProviderProps<
 export default function DataProvider<
   XScaleConfig extends ScaleConfig<AxisScaleOutput>,
   YScaleConfig extends ScaleConfig<AxisScaleOutput>,
-  Datum = unknown
+  Datum extends object
 >({
   theme: propsTheme,
   xScale: xScaleConfig,
@@ -35,22 +36,21 @@ export default function DataProvider<
   // a ThemeProvider is not present.
   const contextTheme = useContext(ThemeContext);
   const theme = propsTheme || contextTheme;
-
   const [{ width, height, margin }, setDimensions] = useDimensions();
   const innerWidth = width - (margin?.left ?? 0) - (margin?.right ?? 0);
   const innerHeight = height - (margin?.top ?? 0) - (margin?.bottom ?? 0);
 
-  type XScale = ScaleConfigToD3Scale<XScaleConfig, AxisScaleOutput>;
-  type YScale = ScaleConfigToD3Scale<YScaleConfig, AxisScaleOutput>;
+  type XScale = ScaleConfigToD3Scale<XScaleConfig, AxisScaleOutput, any, any>;
+  type YScale = ScaleConfigToD3Scale<YScaleConfig, AxisScaleOutput, any, any>;
 
   const dataRegistry = useDataRegistry<XScale, YScale, Datum>();
 
-  const scales: { xScale: XScale; yScale: YScale } = useScales({
+  const { xScale, yScale }: { xScale: XScale; yScale: YScale } = useScales({
     dataRegistry,
     xScaleConfig,
     yScaleConfig,
     xRange: [margin.left, width - margin.right],
-    yRange: [margin.top, height - margin.bottom],
+    yRange: [height - margin.bottom, margin.top],
   });
 
   const registryKeys = dataRegistry.keys();
@@ -71,8 +71,8 @@ export default function DataProvider<
         dataRegistry,
         registerData: dataRegistry.registerData,
         unregisterData: dataRegistry.unregisterData,
-        xScale: scales.xScale,
-        yScale: scales.yScale,
+        xScale,
+        yScale,
         colorScale,
         theme,
         width,
diff --git a/packages/visx-xychart/src/theme/colors.ts b/packages/visx-xychart/src/theme/colors.ts
index b3539e801..71072c2ad 100644
--- a/packages/visx-xychart/src/theme/colors.ts
+++ b/packages/visx-xychart/src/theme/colors.ts
@@ -165,9 +165,10 @@ export const textColor = grayColors[7];
 
 export const defaultColors = [
   allColors.cyan[9],
-  allColors.cyan[6],
+  allColors.cyan[3],
   allColors.yellow[5],
   allColors.red[4],
-  allColors.violet[8],
-  allColors.grape[3],
+  allColors.grape[8],
+  allColors.grape[5],
+  allColors.pink[9],
 ];
diff --git a/packages/visx-xychart/src/theme/themes/dark.ts b/packages/visx-xychart/src/theme/themes/dark.ts
index b2f20e167..8be03ce42 100644
--- a/packages/visx-xychart/src/theme/themes/dark.ts
+++ b/packages/visx-xychart/src/theme/themes/dark.ts
@@ -4,12 +4,13 @@ import buildChartTheme from '../buildChartTheme';
 export default buildChartTheme({
   backgroundColor: '#222',
   colors: [
-    allColors.cyan[1],
-    allColors.blue[2],
+    allColors.cyan[4],
+    allColors.teal[1],
     allColors.yellow[2],
-    allColors.red[2],
-    allColors.violet[2],
-    allColors.grape[2],
+    allColors.red[4],
+    allColors.grape[3],
+    allColors.grape[6],
+    allColors.pink[3],
   ],
   tickLength: 4,
   tickLabelStyles: {
diff --git a/packages/visx-xychart/src/types/data.ts b/packages/visx-xychart/src/types/data.ts
index 9b6e32493..0cdad1243 100644
--- a/packages/visx-xychart/src/types/data.ts
+++ b/packages/visx-xychart/src/types/data.ts
@@ -31,7 +31,11 @@ export interface DataRegistryEntry<XScale extends AxisScale, YScale extends Axis
   legendShape?: LegendShape;
 }
 
-export interface DataContextType<XScale extends AxisScale, YScale extends AxisScale, Datum> {
+export interface DataContextType<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+> {
   xScale: XScale;
   yScale: YScale;
   colorScale: ScaleTypeToD3Scale<string, string>['ordinal'];
@@ -40,7 +44,7 @@ export interface DataContextType<XScale extends AxisScale, YScale extends AxisSc
   innerWidth: number;
   innerHeight: number;
   margin: Margin;
-  dataRegistry: DataRegistry<XScale, YScale, Datum>;
+  dataRegistry: Omit<DataRegistry<XScale, YScale, Datum>, 'registry' | 'registryKeys'>;
   registerData: (
     data: DataRegistryEntry<XScale, YScale, Datum> | DataRegistryEntry<XScale, YScale, Datum>[],
   ) => void;
diff --git a/packages/visx-xychart/src/types/index.ts b/packages/visx-xychart/src/types/index.ts
index bf3a6b736..63c4a19b0 100644
--- a/packages/visx-xychart/src/types/index.ts
+++ b/packages/visx-xychart/src/types/index.ts
@@ -1,2 +1,3 @@
 export * from './data';
+export * from './series';
 export * from './theme';
diff --git a/packages/visx-xychart/src/types/series.ts b/packages/visx-xychart/src/types/series.ts
new file mode 100644
index 000000000..bd1fc175f
--- /dev/null
+++ b/packages/visx-xychart/src/types/series.ts
@@ -0,0 +1,17 @@
+import { AxisScale } from '@visx/axis';
+import { ScaleInput } from '@visx/scale';
+
+export type SeriesProps<
+  XScale extends AxisScale,
+  YScale extends AxisScale,
+  Datum extends object
+> = {
+  /** Required data key for the Series, should be unique across all series. */
+  dataKey: string;
+  /** Data for the Series. */
+  data: Datum[];
+  /** Given a Datum, returns the x-scale value. */
+  xAccessor: (d: Datum) => ScaleInput<XScale>;
+  /** Given a Datum, returns the y-scale value. */
+  yAccessor: (d: Datum) => ScaleInput<YScale>;
+};
diff --git a/packages/visx-xychart/src/utils/getScaleBandwidth.ts b/packages/visx-xychart/src/utils/getScaleBandwidth.ts
new file mode 100644
index 000000000..dd8862ac1
--- /dev/null
+++ b/packages/visx-xychart/src/utils/getScaleBandwidth.ts
@@ -0,0 +1,7 @@
+import { AxisScale } from '@visx/axis';
+
+export default function getScaleBandwidth<Scale extends AxisScale>(scale: Scale) {
+  // Broaden type before using 'xxx' in s as typeguard.
+  const s = scale as AxisScale;
+  return 'bandwidth' in s ? s?.bandwidth() ?? 0 : 0;
+}
diff --git a/packages/visx-xychart/src/utils/getScaledValueFactory.ts b/packages/visx-xychart/src/utils/getScaledValueFactory.ts
new file mode 100644
index 000000000..92a744437
--- /dev/null
+++ b/packages/visx-xychart/src/utils/getScaledValueFactory.ts
@@ -0,0 +1,21 @@
+import { AxisScale } from '@visx/axis';
+import { ScaleInput } from '@visx/scale';
+import isValidNumber from '../typeguards/isValidNumber';
+import getScaleBandwidth from './getScaleBandwidth';
+
+/** Returns a function that takes a Datum as input and returns a scaled value, correcting for the scale's bandwidth if applicable. */
+export default function getScaledValueFactory<Scale extends AxisScale, Datum>(
+  scale: Scale,
+  accessor: (d: Datum) => ScaleInput<Scale>,
+  align: 'start' | 'center' | 'end' = 'center',
+) {
+  return (d: Datum) => {
+    const scaledValue = scale(accessor(d));
+    if (isValidNumber(scaledValue)) {
+      const bandwidthOffset =
+        (align === 'start' ? 0 : getScaleBandwidth(scale)) / (align === 'center' ? 2 : 1);
+      return scaledValue + bandwidthOffset;
+    }
+    return NaN;
+  };
+}
diff --git a/packages/visx-xychart/test/BarSeries.test.tsx b/packages/visx-xychart/test/BarSeries.test.tsx
new file mode 100644
index 000000000..298bbd11e
--- /dev/null
+++ b/packages/visx-xychart/test/BarSeries.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { DataContext, BarSeries } from '../src';
+import getDataContext from './mocks/getDataContext';
+
+describe('<BarSeries />', () => {
+  it('should be defined', () => {
+    expect(BarSeries).toBeDefined();
+  });
+
+  it('should render a LinePath', () => {
+    const series = { key: 'bar', data: [{}, {}], xAccessor: () => 0, yAccessor: () => 10 };
+    const wrapper = mount(
+      <DataContext.Provider value={getDataContext(series)}>
+        <svg>
+          <BarSeries dataKey={series.key} {...series} />
+        </svg>
+      </DataContext.Provider>,
+    );
+    expect(wrapper.find('rect')).toHaveLength(2);
+  });
+});
diff --git a/packages/visx-xychart/test/Grid.test.tsx b/packages/visx-xychart/test/Grid.test.tsx
index 31e2f0ba2..1dfe50d97 100644
--- a/packages/visx-xychart/test/Grid.test.tsx
+++ b/packages/visx-xychart/test/Grid.test.tsx
@@ -4,15 +4,10 @@ import VxAnimatedGridRows from '@visx/react-spring/lib/grid/AnimatedGridRows';
 import VxAnimatedGridColumns from '@visx/react-spring/lib/grid/AnimatedGridColumns';
 import VxGridRows from '@visx/grid/lib/grids/GridRows';
 import VxGridColumns from '@visx/grid/lib/grids/GridColumns';
-import { scaleLinear } from '@visx/scale';
 import { Grid, AnimatedGrid, DataContext } from '../src';
+import getDataContext from './mocks/getDataContext';
 
-const mockContext = {
-  xScale: scaleLinear({ domain: [0, 10], range: [0, 10] }),
-  yScale: scaleLinear({ domain: [0, 10], range: [0, 10] }),
-  innerWidth: 10,
-  innerHeight: 10,
-};
+const mockContext = getDataContext();
 
 describe('<Grid />', () => {
   it('should be defined', () => {
@@ -20,7 +15,6 @@ describe('<Grid />', () => {
   });
   it('should render VxGridRows if rows=true', () => {
     const wrapper = mount(
-      // @ts-ignore partial context value
       <DataContext.Provider value={mockContext}>
         <svg>
           <Grid rows columns={false} />
@@ -32,7 +26,6 @@ describe('<Grid />', () => {
   });
   it('should render VxGridColumns if columns=true', () => {
     const wrapper = mount(
-      // @ts-ignore partial context value
       <DataContext.Provider value={mockContext}>
         <svg>
           <Grid rows={false} columns />
@@ -50,7 +43,6 @@ describe('<AnimatedGrid />', () => {
   });
   it('should render VxAnimatedGridRows if rows=true', () => {
     const wrapper = mount(
-      // @ts-ignore partial context value
       <DataContext.Provider value={mockContext}>
         <svg>
           <AnimatedGrid rows columns={false} />
@@ -62,7 +54,6 @@ describe('<AnimatedGrid />', () => {
   });
   it('should render VxAnimatedGridColumns if columns=true', () => {
     const wrapper = mount(
-      // @ts-ignore partial context value
       <DataContext.Provider value={mockContext}>
         <svg>
           <AnimatedGrid rows={false} columns />
diff --git a/packages/visx-xychart/test/LineSeries.test.tsx b/packages/visx-xychart/test/LineSeries.test.tsx
index 6f23e1685..ce5e2610b 100644
--- a/packages/visx-xychart/test/LineSeries.test.tsx
+++ b/packages/visx-xychart/test/LineSeries.test.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
-import { shallow, ShallowWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 import { LinePath } from '@visx/shape';
-import { LineSeries } from '../src';
+import { DataContext, LineSeries } from '../src';
+import getDataContext from './mocks/getDataContext';
 
 describe('<LineSeries />', () => {
   it('should be defined', () => {
@@ -9,10 +10,15 @@ describe('<LineSeries />', () => {
   });
 
   it('should render a LinePath', () => {
-    const wrapper = shallow(
-      <LineSeries dataKey="line" data={[]} xAccessor={() => 'x'} yAccessor={() => 'y'} />,
+    const series = { key: 'line', data: [], xAccessor: () => 'x', yAccessor: () => '7' };
+    const wrapper = mount(
+      <DataContext.Provider value={getDataContext(series)}>
+        <svg>
+          <LineSeries dataKey={series.key} {...series} />
+        </svg>
+      </DataContext.Provider>,
     );
     // @ts-ignore produces a union type that is too complex to represent.ts(2590)
-    expect(wrapper.find(LinePath) as ShallowWrapper).toHaveLength(1);
+    expect(wrapper.find(LinePath)).toHaveLength(1);
   });
 });
diff --git a/packages/visx-xychart/test/mocks/getDataContext.ts b/packages/visx-xychart/test/mocks/getDataContext.ts
new file mode 100644
index 000000000..ab3b6c4bc
--- /dev/null
+++ b/packages/visx-xychart/test/mocks/getDataContext.ts
@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { scaleLinear, scaleOrdinal } from '@visx/scale';
+import { DataContextType, lightTheme } from '../../lib';
+import DataRegistry from '../../lib/classes/DataRegistry';
+
+const width = 10;
+const height = 10;
+const margin = { top: 0, right: 0, bottom: 0, left: 0 };
+const noOp = () => {};
+
+const getDataContext = (
+  entries?: Parameters<typeof DataRegistry.prototype.registerData>[0],
+): DataContextType<any, any, any> => {
+  const dataRegistry = new DataRegistry();
+  if (entries) dataRegistry.registerData(entries);
+
+  const mockContext = {
+    dataRegistry,
+    registerData: dataRegistry.registerData,
+    unregisterData: dataRegistry.unregisterData,
+    xScale: scaleLinear({ domain: [0, 10], range: [0, width] }),
+    yScale: scaleLinear({ domain: [0, 10], range: [0, height] }),
+    colorScale: scaleOrdinal({ domain: ['sf', 'ny', 'la'], range: ['purple', 'violet', 'grape'] }),
+    width,
+    height,
+    margin,
+    innerWidth: width,
+    innerHeight: height,
+    theme: lightTheme,
+    setDimensions: noOp,
+  };
+
+  return mockContext;
+};
+
+export default getDataContext;
diff --git a/packages/visx-xychart/test/useDataRegistry.test.tsx b/packages/visx-xychart/test/useDataRegistry.test.tsx
new file mode 100644
index 000000000..51bd1c051
--- /dev/null
+++ b/packages/visx-xychart/test/useDataRegistry.test.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import useDataRegistry from '../src/hooks/useDataRegistry';
+
+describe('useDataRegistry', () => {
+  it('should be defined', () => {
+    expect(useDataRegistry).toBeDefined();
+  });
+
+  it('should provide a DataRegistry', () => {
+    expect.assertions(1);
+
+    const RegistryConsumer = () => {
+      const registry = useDataRegistry();
+      expect(registry).toBeDefined();
+
+      return null;
+    };
+
+    mount(<RegistryConsumer />);
+  });
+});
diff --git a/packages/visx-xychart/test/withRegisteredData.test.tsx b/packages/visx-xychart/test/withRegisteredData.test.tsx
new file mode 100644
index 000000000..199a8fdf4
--- /dev/null
+++ b/packages/visx-xychart/test/withRegisteredData.test.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { mount } from 'enzyme';
+import withRegisteredData from '../src/enhancers/withRegisteredData';
+import getDataContext from './mocks/getDataContext';
+import { DataContext } from '../src';
+
+const series = {
+  key: 'visx',
+  xAccessor: () => 'x',
+  yAccessor: () => 'y',
+  data: [{}],
+};
+
+describe('withRegisteredData', () => {
+  it('should be defined', () => {
+    expect(withRegisteredData).toBeDefined();
+  });
+
+  it('should return a component', () => {
+    const BaseComponent = () => <div />;
+    const WrappedComponent = withRegisteredData(BaseComponent);
+    expect(() => <WrappedComponent dataKey={series.key} {...series} />).not.toThrow();
+  });
+
+  it('should not render base component if scales or key is not in context', () => {
+    const mockContextWithSeries = getDataContext(series);
+    const BaseComponent = () => <div />;
+    const WrappedComponent = withRegisteredData(BaseComponent);
+
+    const wrapperNoContext = mount(
+      <DataContext.Provider value={{}}>
+        <WrappedComponent dataKey={series.key} {...series} />
+      </DataContext.Provider>,
+    );
+    const wrapperCompleteContext = mount(
+      <DataContext.Provider value={mockContextWithSeries}>
+        <WrappedComponent dataKey={series.key} {...series} />
+      </DataContext.Provider>,
+    );
+
+    expect(wrapperNoContext.find('div')).toHaveLength(0);
+    expect(wrapperCompleteContext.find('div')).toHaveLength(1);
+  });
+
+  it('should pass data and accessors to BaseComponent from context not props', () => {
+    expect.assertions(3);
+    const mockContext = getDataContext(series);
+    const BaseComponent = ({ data, xAccessor, yAccessor }: any) => {
+      expect(data).toBe(series.data);
+      expect(xAccessor).toBe(series.xAccessor);
+      expect(yAccessor).toBe(series.yAccessor);
+      return null;
+    };
+    const WrappedComponent = withRegisteredData(BaseComponent);
+
+    mount(
+      <DataContext.Provider value={mockContext}>
+        <WrappedComponent
+          dataKey={series.key}
+          {...series}
+          data={[]}
+          xAccessor={() => 3}
+          yAccessor={() => 4}
+        />
+      </DataContext.Provider>,
+    );
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 3a0b07457..75e492a07 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5241,6 +5241,11 @@ d3-array@1, d3-array@^1.1.1, d3-array@^1.2.0:
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.4.0.tgz#87f8b9ad11088769c82b5ea846bcb1cc9393f242"
   integrity sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw==
 
+d3-array@2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.6.0.tgz#b8df0c695eab26e2b2fd4ffe2d84bd703f8d0faf"
+  integrity sha512-1TgzIGb6hrHKSCGccdL209Ibk41HCeyv5znFEvJfBsBGhD3qpoHt/2W2ECpyLxpG1k7aNJz0BYrmLpVs9hIGNQ==
+
 d3-chord@^1.0.4:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.6.tgz#309157e3f2db2c752f0280fedd35f2067ccbb15f"