stream-charts 1.2.1 → 2.0.0

package/src/app/charts/plots/BarPlot.tsx

@@ -1,46 +1,68 @@
-import {AxesAssignment, setClipPathG} from "./plot";
+import {type AxesAssignment, clipToArea} from "./plot";
+import {useCanvasZoomPan} from "./useCanvasZoomPan";
 import * as d3 from "d3";
-import {ZoomTransform} from "d3";
 import {noop} from "../utils";
 import {useChart} from "../hooks/useChart";
-import React, {useCallback, useEffect, useMemo, useRef} from "react";
-import {Datum, TimeSeries} from "../series/timeSeries";
-import {GSelection, SvgSelection} from "../d3types";
+import {useCallback, useEffect, useEffectEvent, useMemo, useRef} from "react";
+import type {CanvasContext} from "../d3types";
+import {seriesAt, canvasLocalPoint, type SeriesGeometry} from "./hitTesting";
 import {
     axesForSeriesGen,
-    BaseAxis,
-    ContinuousNumericAxis,
+    type BaseAxis,
+    type ContinuousNumericAxis,
+    AxisType,
+    checkAxisType,
     ordinalAxisIntervals,
     ordinalAxisRanges,
     ordinalAxisZoomHandler,
     ordinalPanHandler,
-    OrdinalStringAxis
+    type OrdinalStringAxis
 } from "../axes/axes";
-import {Subscription} from "rxjs";
-import {Dimensions, Margin} from "../styling/margins";
-import {subscriptionOrdinalXFor, WindowedOrdinalStats} from "../subscriptions/subscriptions";
-import {useDataObservable} from "../hooks/useDataObservable";
+import type {Dimensions, Margin} from "../styling/margins";
+import {ordinalViewDriverFor} from "../subscriptions/viewDrivers";
+import {useDataSource, useDataSourceRunning, useInitialData, useStreamingSettings} from "../hooks/useDataSource";
+import {initialOrdinalStats, type WindowedOrdinalStats} from "../datasources/ordinalDataSource";
 import {usePlotDimensions} from "../hooks/usePlotDimensions";
-import {useInitialData} from "../hooks/useInitialData";
-import {copyValueStatsForSeries, OrdinalChartData, OrdinalStats} from "../observables/ordinals";
-import {BaseSeries} from "../series/baseSeries";
-import {calculateOrdinalStats, OrdinalDatum, OrdinalSeries} from "../series/ordinalSeries";
-import {
-    applyFillStylesTo,
-    applyStrokeStylesTo,
-    STROKE_COLOR,
-    STROKE_OPACITY,
-    STROKE_WIDTH,
-    SvgFillStyle,
-    SvgStrokeStyle
-} from "../styling/svgStyle";
-import {BarSeriesStyle, BarStyle, defaultBarSeriesStyle, LineStyle} from "../styling/barPlotStyle";
-import {TooltipData} from "../hooks/useTooltip";
+import {type OrdinalChartData} from "../observables/ordinals";
+import type {BaseSeries} from "../series/baseSeries";
+import {type OrdinalDatum} from "../series/ordinalSeries";
+import {applyFillStyle, applyStrokeStyle} from "../styling/canvasStyle";
+import type {SvgFillStyle, SvgStrokeStyle} from "../styling/svgStyle";
+import {type BarSeriesStyle, type BarStyle, defaultBarSeriesStyle} from "../styling/barPlotStyle";
+import type {TooltipData} from "../hooks/useTooltip";
 import {OrdinalAxisRange} from "../axes/OrdinalAxisRange";
-import {AxisInterval} from "../axes/AxisInterval";
 import {Optional} from "result-fn";
+import {BAR_CHART_TOOLTIP_PROVIDER_IDS} from "./constants";
+import {AxisInterval} from "../axes/AxisInterval";
+import {extentOf, extentWith} from "../axes/autoScale";
+import {type AutoScaleAxes, growAutoScaledYAxes, useAutoScaleRestart} from "./autoScaleYAxes";
+
+/**
+ * A snapshot of the bar plot's zoom/pan state, in a form that can be held outside the plot (e.g.
+ * in an application store) and handed back to a later instance of the plot (see the
+ * {@link Props.zoomState} and {@link Props.onZoomStateChange} props) -- so that zooming, navigating
+ * away, and navigating back doesn't reset the zoom.
+ */
+export interface BarPlotZoomState {
+    /**
+     * d3-zoom's cumulative scale factor (`transform.k`) at the time of the snapshot. The ordinal
+     * zoom math depends on this matching the axis ranges (see `OrdinalAxisRange.scaledCumulative`),
+     * so it must be restored onto the new canvas along with the ranges.
+     */
+    k: number
+    /**
+     * Maps each ordinal x-axis ID to its current (zoomed/panned) pixel range, expressed as
+     * fractions of the axis' original (un-zoomed) pixel extent, so that the snapshot remains valid
+     * if the plot is a different width when it is restored.
+     */
+    ranges: Record<string, [startFraction: number, endFraction: number]>
+}
 
 // typescript doesn't support enums with computed string values, even though they are all constants...
+/**
+ * An ID (e.g. a tooltip provider ID) for each of the five kinds of element the bar plot draws for
+ * each series
+ */
 export type BarChartElementId = {
     readonly currentValue: string
     readonly meanValue: string
@@ -49,30 +71,9 @@ export type BarChartElementId = {
     readonly windowedMinMax: string
 }
 
-const STREAM_CHARTS_BAR_CHART_ID = 'stream-charts-bar-chart'
-
-// elements of the bar-chart
-const BAR_CHART_CLASS_IDS: BarChartElementId = {
-    currentValue: STREAM_CHARTS_BAR_CHART_ID + '-value-lines',
-    meanValue: STREAM_CHARTS_BAR_CHART_ID + '-mean-value-lines',
-    minMax: STREAM_CHARTS_BAR_CHART_ID + '-min-max-bars',
-    windowedMeanValue: STREAM_CHARTS_BAR_CHART_ID + '-windowed-mean-value-lines',
-    windowedMinMax: STREAM_CHARTS_BAR_CHART_ID + '-windowed-mean-bars'
-}
-
-const classIdFor = (id: string) => '.' + id
-
-// constants identifying the bar-chart elements for which mouse-over/mouse-leave events are defined
-const TOOLTIP_PROVIDER_ID = STREAM_CHARTS_BAR_CHART_ID + '-tooltip-provider'
-
-export const BAR_CHART_TOOLTIP_PROVIDER_IDS: BarChartElementId = {
-    currentValue: TOOLTIP_PROVIDER_ID + '-current-value',
-    meanValue: TOOLTIP_PROVIDER_ID + '-mean-value',
-    minMax: TOOLTIP_PROVIDER_ID + '-min-max',
-    windowedMeanValue: TOOLTIP_PROVIDER_ID + '-windowed-min-max',
-    windowedMinMax: TOOLTIP_PROVIDER_ID + '-windowed-mean'
-}
-
+/**
+ * The properties of the {@link BarPlot}
+ */
 export interface Props {
     /**
      * Holds the mapping between a series and the axis it uses (is assigned). The
@@ -80,16 +81,26 @@ export interface Props {
      * object holding the ID of the assigned x-axis and y-axis.
      */
     axisAssignments?: Map<string, AxesAssignment>
+    /**
+     * Whether to show each series' lifetime min/max bar (default is true)
+     */
     showMinMaxBars?: boolean
+    /**
+     * Whether to show each series' windowed min/max bar (default is true)
+     */
     showWindowedMinMaxBars?: boolean
+    /**
+     * Whether to show each series' current-value line (default is true)
+     */
     showValueLines?: boolean
+    /**
+     * Whether to show each series' lifetime mean-value line (default is true)
+     */
     showMeanValueLines?: boolean
-    showWindowedMeanValueLines?: boolean
     /**
-     * The number of milliseconds worth of data to hold in memory before dropping it. Defaults to
-     * infinity (i.e. no data is dropped)
+     * Whether to show each series' windowed mean-value line (default is true)
      */
-    dropDataAfter?: number
+    showWindowedMeanValueLines?: boolean
     /**
      * Enables panning (default is false)
      */
@@ -104,35 +115,85 @@ export interface Props {
      */
     zoomKeyModifiersRequired?: boolean
     /**
-     * The (optional, default = 2 pixels) top and bottom margin (in pixels) for the spike lines in the plot.
-     * Margins on individual series can also be set through the {@link Chart.seriesStyles} property.
+     * The (optional, default = 2 pixels) left and right margin (in pixels) between each category's
+     * edges and its lines. Margins on individual series can also be set through the
+     * {@link ChartProps.seriesStyles} property.
      */
     barMargin?: number
     /**
      * The (optional) default style for the bar series that are used if no other styles are specified
      */
     barSeriesStyle?: BarSeriesStyle
+    /**
+     * When true, hovering over any element (bar, line) of a series also highlights the x- and
+     * y-axes it is plotted against, using the axis' own default highlight color/width (bar series
+     * styles don't carry a single flat highlight color/width the way line-series styles do, so
+     * this doesn't attempt to match a specific element's highlight style). Defaults to `false`.
+     */
+    highlightAxesOnMouseOver?: boolean
+    /**
+     * An (optional) zoom/pan state to restore when this plot mounts -- commonly the last value
+     * reported through {@link onZoomStateChange} and held by the application (e.g. in a store)
+     * so that the zoom survives the plot being unmounted and remounted (e.g. navigating away
+     * and back). Only read once, when the plot's axes are first available; later changes to this
+     * prop are ignored.
+     */
+    zoomState?: BarPlotZoomState
+    /**
+     * (Optional) callback that is handed the plot's zoom/pan state after each zoom event and at
+     * the end of each pan, so the application can hold on to it (see {@link BarPlotProps.zoomState}).
+     */
+    onZoomStateChange?: (zoomState: BarPlotZoomState) => void
+    /**
+     * Called whenever this plot (re)creates its zoom behavior, handing
+     * the caller a `resetZoom` function that programmatically clears d3-zoom's own accumulated
+     * scale state back to identity and restores the ordinal x-axes to their original (un-zoomed,
+     * un-panned) ranges. See {@link ScatterPlot}'s identical prop for the full explanation of why
+     * this is needed. Only meaningful (called) while `zoomEnabled` is true.
+     */
+    onZoomReset?: (resetZoom: () => void) => void
+}
+
+/**
+ * Maps the short element-type keys used internally for hit-testing geometry (`minMax`,
+ * `windowedMinMax`, `meanValue`, `windowedMeanValue`, `currentValue`) to the actual provider IDs
+ * (`BAR_CHART_TOOLTIP_PROVIDER_IDS`) that `mouseOverHandlerFor`/`mouseLeaveHandlerFor` expect.
+ */
+const PROVIDER_ID_FOR_ELEMENT_TYPE: Record<string, string> = {
+    minMax: BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax,
+    windowedMinMax: BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax,
+    meanValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue,
+    windowedMeanValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue,
+    currentValue: BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue,
 }
 
 /**
- * Renders a streaming bar plot for the series in the initial data and those sourced by the
- * observable specified as a property in the {@link Chart}. This component uses the {@link useChart}
+ * Renders a streaming bar plot for the series held by the {@link StreamingDataSource} handed to the
+ * {@link Chart} (its `dataSource` prop) -- along with each series' lifetime and windowed stats,
+ * which an {@link OrdinalDataSource} keeps. This component uses the {@link useChart}
  * hook, and therefore must be a child of the {@link Chart} to be plugged in to the
  * chart ecosystem (axes, tracker, tooltip).
  *
+ * Internally, this no longer creates/updates SVG `<rect>`/`<line>` elements. Instead, it registers
+ * a single draw function with the chart's {@link CanvasContext} that redraws every series' bars
+ * and lines from scratch each time the canvas repaints. Mouse hover (for the tooltip and the
+ * value-line/windowed-mean-line highlight) is handled by hit-testing the mouse position against
+ * the last-drawn geometry, keyed per `${seriesName}::${elementType}` so the five overlaid visual
+ * elements (min-max bar, windowed min-max bar, mean line, windowed mean line, value line) can be
+ * hit-tested and highlighted independently, matching the old per-element SVG mouseover behavior.
+ *
  * For a relatively complete example of how to use this plot component, see the
  * <a href="https://github.com/robphilipp/stream-charts-examples">`StreamingBarChart` example</a>
  *
  * @param props The properties associated with the bar plot
+ * @return `null` (the plot draws onto the chart's canvas)
  * @example
  * ```typescript
  * <BarPlot
  *     barMargin={1}
- *     dropDataAfter={5000}
  *     panEnabled={true}
  *     zoomEnabled={true}
  *     zoomKeyModifiersRequired={true}
- *     withCadenceOf={50}
  *
  *     showMinMaxBars={true}
  *     showValueLines={true}
@@ -145,8 +206,7 @@ export interface Props {
 export function BarPlot(props: Props): null {
     const {
         chartId,
-        container,
-        mainG,
+        canvasContext,
         axes,
         seriesStyles,
         seriesFilter,
@@ -159,28 +219,29 @@ export function BarPlot(props: Props): null {
         setAxisAssignments,
         setAxisIntervalFor,
         setOriginalAxisIntervalFor,
-        axesRanges
+        axesRanges,
+        axisRangeFor,
+        updateAxisRanges,
     } = axes
 
+
     const {mouseOverHandlerFor, mouseLeaveHandlerFor} = mouse
 
     const {plotDimensions, margin} = usePlotDimensions()
 
     const {
-        seriesObservable,
         windowingTime = 100,
-        shouldSubscribe,
-
-        onSubscribe = noop,
-        onUpdateData,
         onUpdateChartTime = noop
-    } = useDataObservable<OrdinalChartData, OrdinalDatum>()
+    } = useStreamingSettings()
 
-    const {initialData} = useInitialData<OrdinalChartData, OrdinalDatum>()
+    // the application-owned source of the data, and whether it's running (streaming)
+    const dataSource = useDataSource<OrdinalChartData, OrdinalDatum>()
+    const running = useDataSourceRunning(dataSource)
+
+    const {initialData} = useInitialData<OrdinalDatum>()
 
     const {
         axisAssignments = new Map<string, AxesAssignment>(),
-        dropDataAfter = Infinity,
         panEnabled = false,
         zoomEnabled = false,
         zoomKeyModifiersRequired = true,
@@ -190,175 +251,77 @@ export function BarPlot(props: Props): null {
         showMeanValueLines = true,
         showWindowedMeanValueLines = true,
         barMargin = 2,
-        barSeriesStyle = defaultBarSeriesStyle()
+        barSeriesStyle = defaultBarSeriesStyle(),
+        highlightAxesOnMouseOver = false,
+        zoomState = undefined,
+        onZoomStateChange = noop,
+        onZoomReset = noop,
     } = props
 
     // why do "dataRef" and "seriesRef" both hold on to the same underlying data? for performance.
     //
     // the "dataRef" and "seriesRef" both point to the same underlying data, a collection
-    // of series. The series in "dataRef" are bound to the DOM elements through d3. The "seriesRef" series
-    // are the ones that are updated as new data is streamed in.
+    // of series (held, and updated as new data is streamed in, by the data source). The series in
+    // "dataRef" are read by the canvas draw function, and the "seriesRef" map is for looking a
+    // series up by its name.
     //
     // the "dataRef" object holds on to a copy of the initial data (which is an array of
     // time-series, e.i. an array of BaseSeries<OrdinalDatum> objects). The slice just creates a copy of
     // the array, but the references to the BaseSeries objects are the same and still point to the same
     // data as the "initialData" array.
     //
-    // the "seriesRef" object is a reference to a map (series_name -> BaseSeries<OrdinalDatum>) which is
-    // used to update the data in the series. When new data enters, it is appended to one or more series.
+    // the "seriesRef" object is a reference to a map (series_name -> BaseSeries<OrdinalDatum>), used
+    // to find the series under the mouse (for the tooltip).
     //
-    // the series in the "dataRef" object are the ones bound to the DOM elements in d3, and so as these
-    // are updated, d3 will update the DOM elements (the elements in this plot).
+    // the series in the "dataRef" object are the ones read by the next redraw, so as these are
+    // updated, the next canvas repaint picks up the new data.
     const dataRef = useRef<Array<BaseSeries<OrdinalDatum>>>(initialData.slice())
     const seriesRef = useRef<Map<string, BaseSeries<OrdinalDatum>>>(
         new Map(initialData.map(series => [series.name, series]))
     )
-    const statsRef = useRef<WindowedOrdinalStats>(initialOrdinalStats(dataRef.current))
+    // the lifetime and windowed stats for each series -- kept by the data source (when it's an
+    // ordinal data source), so they keep accumulating while this plot is unmounted
+    const statsRef = useRef<WindowedOrdinalStats>(statsFrom(dataSource, initialData))
 
     // map(axis_id -> current_time) -- maps the axis ID to the current time for that axis
     const currentTimeRef = useRef<number>(0)
-    const subscriptionRef = useRef<Subscription>(undefined)
-
-    const isSubscriptionClosed = () => subscriptionRef.current === undefined || subscriptionRef.current.closed
-
-    const allowTooltipRef = useRef<boolean>(isSubscriptionClosed())
-
-    useEffect(
-        () => {
-            currentTimeRef.current = 0
-        },
-        [xAxesState]
-    )
-
-    // set the axis assignments needed if a tooltip is being used
-    useEffect(
-        () => {
-            setAxisAssignments(axisAssignments)
-        },
-        [axisAssignments, setAxisAssignments]
-    )
 
-    // calculates the distinct series IDs that cover all the series in the plot
-    const axesForSeries = useMemo(
-        () => axesForSeriesGen<OrdinalDatum, OrdinalStringAxis>(initialData, axisAssignments, xAxesState),
-        [initialData, axisAssignments, xAxesState]
-    )
+    // tooltips are only shown while the data source is paused (and not while panning)
+    const allowTooltipRef = useRef<boolean>(!(dataSource?.running ?? false))
 
-    // updates the timing using the onUpdateTime and updatePlot references. This and the references
-    // defined above allow the axes' times to be updated properly by avoid stale reference to these
-    // functions.
-    const updateTimingAndPlot = useCallback(
-        (ranges: Map<string, OrdinalAxisRange>): void => {
-            if (mainG !== null) {
-                updatePlotRef.current(ranges, mainG)
-                onUpdateChartTime(currentTimeRef.current)
-                updatePlotRef.current(ranges, mainG)
-            }
-        },
-        [mainG, onUpdateChartTime]
-    )
-
-    // todo find better way
-    // when the initial data changes, then reset the plot. note that the initial data doesn't change
-    // during the normal course of updates from the observable, only when the plot is restarted.
-    useEffect(
-        () => {
-            dataRef.current = initialData.slice()
-            seriesRef.current = new Map(initialData.map(series => [series.name, series]))
-            currentTimeRef.current = 0
-            statsRef.current = initialOrdinalStats(dataRef.current)
-        },
-        // ** not happy about this **
-        // only want this effect to run when the initial data is changed, which mean all the
-        // other dependencies are recalculated anyway.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [initialData]
-    )
-
-    /**
-     * Adjusts the time-range and updates the plot when the plot is dragged to the left or right
-     * @param deltaX The amount that the plot is dragged
-     * @param plotDimensions The dimensions of the plot
-     * @param series An array of series names
-     * @param ranges A map holding the axis ID and its associated time range
-     */
-    const onPan = useCallback(
-        (x: number,
-         plotDimensions: Dimensions,
-         series: Array<string>,
-         ranges: Map<string, OrdinalAxisRange>
-        ) => ordinalPanHandler(axesForSeries, margin, setAxisIntervalFor, xAxesState)(x, plotDimensions, series, ranges),
-        [axesForSeries, margin, setAxisIntervalFor, xAxesState]
-    )
+    // the last-drawn geometry for each `${seriesName}::${elementType}`, in canvas coordinates,
+    // used for hit-testing mouse hover on `mousemove` (see the effect below that wires up the
+    // listener)
+    const geometryRef = useRef<Map<string, SeriesGeometry>>(new Map())
+    // which specific element (series + type) the mouse was over on the previous `mousemove`, so
+    // we know when to fire a "leave" before firing an "over" for a different element -- unlike
+    // Scatter/Raster, BarPlot doesn't use the shared `hoveredSeriesName` chart state, since here
+    // hover is scoped to one of five element *types* per series, not the series as a whole
+    const lastHoveredRef = useRef<{seriesName: string, elementType: string} | undefined>(undefined)
 
     /**
-     * Called when the user uses the scroll wheel (or scroll gesture) to zoom in or out. Zooms in/out
-     * at the location of the mouse when the scroll wheel or gesture was applied.
-     * @param transform The d3 zoom transformation information
-     * @param x The x-position of the mouse when the scroll wheel or gesture is used
-     * @param plotDimensions The dimensions of the plot
-     * @param series An array of series names
-     * @param ranges A map holding the axis ID and its associated time-range
-     */
-    const onZoom = useCallback(
-        (
-            transform: ZoomTransform,
-            x: number,
-            plotDimensions: Dimensions,
-            ranges: Map<string, OrdinalAxisRange>,
-        ) => ordinalAxisZoomHandler(axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState)(transform, x, plotDimensions, ranges),
-        [axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState]
-    )
-
-    /**
-     * @param ordinalRanges
-     * @param mainGElem
+     * (Re-)registers this plot's draw function with the canvas context and requests a redraw.
+     * Replaces the old version, which directly mutated SVG `<rect>`/`<line>` elements bound via
+     * d3's enter/update/exit join. Canvas has no persistent elements to join against, so the draw
+     * function just redraws every element from current data/scale state each time it's invoked.
+     *
+     * Pan/zoom behavior setup lives in a separate effect (see below), not here -- this function
+     * runs on every data tick (each `windowingTime` interval), and recreating/reattaching a
+     * `d3.drag()`/`d3.zoom()` behavior that often is pure overhead unrelated to drawing the new
+     * data.
+     * @param cc The canvas context to register the draw function with
      */
     const updatePlot = useCallback(
-        (ordinalRanges: Map<string, OrdinalAxisRange>, mainGElem: GSelection) => {
-            if (container) {
-                // select the svg element bind the data to them
-                const svg: SvgSelection = d3.select<SVGSVGElement, any>(container)
-
-                // set up panning
-                if (panEnabled) {
-                    const drag = d3.drag<SVGSVGElement, Datum>()
-                        .on("start", () => {
-                            d3.select(container).style("cursor", "move")
-                            allowTooltipRef.current = false
-                        })
-                        .on("drag", (event: any) => {
-                            const names = dataRef.current.map(series => series.name)
-                            onPan(event.dx, plotDimensions, names, ordinalRanges)
-                            // need to update the plot with the new time-ranges
-                            updatePlotRef.current(ordinalRanges, mainGElem)
-                        })
-                        .on("end", () => {
-                            d3.select(container).style("cursor", "auto")
-                            allowTooltipRef.current = isSubscriptionClosed()
-                        })
+        (cc: CanvasContext) => {
+            const draw = (context: CanvasContext) => {
+                const {context2D} = context
 
-                    svg.call(drag)
-                }
+                context2D.save()
+                clipToArea(context, plotDimensions, {x: margin.left, y: margin.top})
+                context2D.translate(margin.left, margin.top)
 
-                // set up for zooming
-                if (zoomEnabled) {
-                    const zoom = d3.zoom<SVGSVGElement, Datum>()
-                        .filter((event: any) => !zoomKeyModifiersRequired || event.shiftKey || event.ctrlKey)
-                        .scaleExtent([1, 10])
-                        .translateExtent([[margin.left, margin.top], [plotDimensions.width, plotDimensions.height]])
-                        .on("zoom", (event: any) => {
-                                onZoom(
-                                    event.transform,
-                                    event.sourceEvent.offsetX - margin.left,
-                                    plotDimensions,
-                                    ordinalRanges,
-                                )
-                                updatePlotRef.current(ordinalRanges, mainGElem)
-                            }
-                        )
-                    svg.call(zoom)
-                }
+                const newGeometry = new Map<string, SeriesGeometry>()
+                const hovered = lastHoveredRef.current
 
                 // enter, update, delete the bar data
                 dataRef.current.forEach(series => {
@@ -368,6 +331,7 @@ export function BarPlot(props: Props): null {
                         axisId => xAxesState.axisFor(axisId).getOrUndefined(),
                         axisId => yAxesState.axisFor(axisId).getOrUndefined()
                     )
+                    if (xAxis === undefined || yAxis === undefined) return
 
                     // grab the series styles, or the defaults if none exist
                     const {
@@ -383,13 +347,13 @@ export function BarPlot(props: Props): null {
                     }
 
                     // only show the data for which the regex filter matches
-                    const plotData = series.name.match(seriesFilter) ? [series.data[series.data.length - 1]] : []
+                    const plotData = series.name.match(seriesFilter) && series.data.length > 0 ?
+                        [series.data[series.data.length - 1]] :
+                        []
+                    if (plotData.length === 0) return
 
                     // grab the functions for determining the lower and upper bounds of the category
-                    const {
-                        lower,
-                        upper
-                    } = xAxisCategoryBoundsFn(xAxis.scale.bandwidth(), valueLineStyle.regular.width, categoryMargin)
+                    const {lower, upper} = xAxisCategoryBoundsFn(xAxis.scale.bandwidth(), valueLineStyle.regular.width, categoryMargin)
 
                     // grab the value (index) associated with the series name (this is a category axis)
                     const x = xAxis.scale(series.name) || 0
@@ -403,55 +367,20 @@ export function BarPlot(props: Props): null {
                         statsRef.current.valueStatsForSeries.get(series.name)?.max.value || 0,
                         yAxis
                     )
-
-                    svg
-                        .select<SVGGElement>(`#${series.name}-${chartId}-bar`)
-                        .selectAll<SVGRectElement, PlotData>(classIdFor(BAR_CHART_CLASS_IDS.minMax))
-                        .data(plotData)
-                        .join(
-                            enter => barFor(
-                                enter.append<SVGRectElement>('rect').attr('class', BAR_CHART_CLASS_IDS.minMax),
-                                totalBar,
-                                barStyleFor(showMinMaxBars, minMaxBarStyle)
-                            ),
-                            update => barFor(
-                                update,
-                                totalBar,
-                                barStyleFor(showMinMaxBars, minMaxBarStyle)
-                            ),
-                            exit => exit.remove()
-                        )
-                        .on(
-                            "mouseover",
-                            (event,) =>
-                                handleMouseOverBar(
-                                    container,
-                                    yAxis,
-                                    series,
-                                    statsRef.current,
-                                    event,
-                                    margin,
-                                    seriesStyles,
-                                    barSeriesStyle,
-                                    allowTooltipRef.current && showMinMaxBars,
-                                    mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax),
-                                    BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax
-                                )
-                        )
-                        .on(
-                            "mouseleave",
-                            event => handleMouseLeaveSeries(
-                                series.name,
-                                event.currentTarget,
-                                seriesStyles,
-                                barSeriesStyle,
-                                mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax),
-                                BAR_CHART_TOOLTIP_PROVIDER_IDS.minMax
-                            )
-                        )
+                    drawBar(context2D, totalBar, barStyleFor(showMinMaxBars, minMaxBarStyle))
+                    newGeometry.set(`${series.name}::minMax`, {
+                        points: [],
+                        rects: [{
+                            x: totalBar.upperX + margin.left,
+                            y: totalBar.upperY + margin.top,
+                            width: totalBar.width,
+                            height: totalBar.height
+                        }],
+                        hitRadius: 0
+                    })
 
                     //
-                    // windowed-mean line when the windowed stats are defined for the series
+                    // windowed-mean line and windowed min/max bar, when the windowed stats are defined for the series
                     const seriesWindowedStats = statsRef.current.windowedValueStatsForSeries.get(series.name)
                     if (seriesWindowedStats !== undefined) {
                         const windowedBar = barDimensions(
@@ -460,307 +389,377 @@ export function BarPlot(props: Props): null {
                             seriesWindowedStats.min.value, seriesWindowedStats.max.value,
                             yAxis
                         )
-
-                        svg
-                            .select<SVGGElement>(`#${series.name}-${chartId}-bar`)
-                            .selectAll<SVGRectElement, PlotData>(classIdFor(BAR_CHART_CLASS_IDS.windowedMinMax))
-                            .data(plotData)
-                            .join(
-                                enter => barFor(
-                                    enter.append<SVGRectElement>('rect').attr('class', BAR_CHART_CLASS_IDS.windowedMinMax),
-                                    windowedBar,
-                                    barStyleFor(showWindowedMinMaxBars, windowedBarStyle)
-                                ),
-                                update => barFor(
-                                    update,
-                                    windowedBar,
-                                    barStyleFor(showWindowedMinMaxBars, windowedBarStyle)),
-                                exit => exit.remove()
-                            )
-                            .on(
-                                "mouseover",
-                                (event,) =>
-                                    handleMouseOverBar(
-                                        container,
-                                        yAxis,
-                                        series,
-                                        statsRef.current,
-                                        event,
-                                        margin,
-                                        seriesStyles,
-                                        barSeriesStyle,
-                                        allowTooltipRef.current && showWindowedMinMaxBars,
-                                        mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax),
-                                        BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax
-                                    )
-                            )
-                            .on(
-                                "mouseleave",
-                                event => handleMouseLeaveSeries(
-                                    series.name,
-                                    event.currentTarget,
-                                    seriesStyles,
-                                    barSeriesStyle,
-                                    mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax),
-                                    BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMinMax
-                                )
-                            )
+                        drawBar(context2D, windowedBar, barStyleFor(showWindowedMinMaxBars, windowedBarStyle))
+                        newGeometry.set(`${series.name}::windowedMinMax`, {
+                            points: [],
+                            rects: [{
+                                x: windowedBar.upperX + margin.left,
+                                y: windowedBar.upperY + margin.top,
+                                width: windowedBar.width,
+                                height: windowedBar.height
+                            }],
+                            hitRadius: 0
+                        })
 
                         //
                         // mean line
-                        const meanLineY = yAxis.scale(statsRef.current.valueStatsForSeries.get(series.name)?.mean || 0)
-                        svg
-                            .select<SVGGElement>(`#${series.name}-${chartId}-bar`)
-                            .selectAll<SVGLineElement, PlotData>(classIdFor(BAR_CHART_CLASS_IDS.meanValue))
-                            .data(showMeanValueLines ? plotData : [])
-                            .join(
-                                enter => lineFor(
-                                    enter.append<SVGLineElement>('line').attr('class', BAR_CHART_CLASS_IDS.meanValue),
-                                    {
-                                        x1: () => lower(x), y1: () => meanLineY,
-                                        x2: () => upper(x), y2: () => meanLineY
-                                    },
-                                    meanValueLineStyle.regular
-                                ),
-                                update => lineFor(
-                                    update,
-                                    {
-                                        x1: () => lower(x), y1: () => meanLineY,
-                                        x2: () => upper(x), y2: () => meanLineY
-                                    },
-                                    meanValueLineStyle.regular
-                                ),
-                                exit => exit.remove()
-                            )
-                            .on(
-                                "mouseover",
-                                (event,) =>
-                                    handleMouseOverBar(
-                                        container,
-                                        yAxis,
-                                        series,
-                                        statsRef.current,
-                                        event,
-                                        margin,
-                                        seriesStyles,
-                                        barSeriesStyle,
-                                        allowTooltipRef.current && showMeanValueLines,
-                                        mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue),
-                                        BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue
-                                    )
-                            )
-                            .on(
-                                "mouseleave",
-                                event => handleMouseLeaveSeries(
-                                    series.name,
-                                    event.currentTarget,
-                                    seriesStyles,
-                                    barSeriesStyle,
-                                    mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue),
-                                    BAR_CHART_TOOLTIP_PROVIDER_IDS.meanValue
-                                )
-                            )
+                        if (showMeanValueLines) {
+                            const meanLineY = yAxis.scale(statsRef.current.valueStatsForSeries.get(series.name)?.mean || 0)
+                            drawLine(context2D, lower(x), meanLineY, upper(x), meanLineY, meanValueLineStyle.regular)
+                            newGeometry.set(`${series.name}::meanValue`, {
+                                points: [],
+                                segments: [[
+                                    [lower(x) + margin.left, meanLineY + margin.top],
+                                    [upper(x) + margin.left, meanLineY + margin.top]
+                                ]],
+                                hitRadius: Math.max(4, meanValueLineStyle.regular.width ?? 1)
+                            })
+                        }
 
-                        const windowedMeanLineY = yAxis.scale(isNaN(seriesWindowedStats.mean) ? 0 : seriesWindowedStats.mean)
-                        svg
-                            .select<SVGGElement>(`#${series.name}-${chartId}-bar`)
-                            .selectAll<SVGLineElement, PlotData>(classIdFor(BAR_CHART_CLASS_IDS.windowedMeanValue))
-                            .data(showWindowedMeanValueLines ? plotData : [])
-                            .join(
-                                enter => lineFor(
-                                    enter.append<SVGLineElement>('line').attr('class', BAR_CHART_CLASS_IDS.windowedMeanValue),
-                                    {
-                                        x1: () => lower(x), y1: () => windowedMeanLineY,
-                                        x2: () => upper(x), y2: () => windowedMeanLineY
-                                    },
-                                    windowedMeanLineStyle.regular
-                                ),
-                                update => lineFor(
-                                    update,
-                                    {
-                                        x1: () => lower(x), y1: () => windowedMeanLineY,
-                                        x2: () => upper(x), y2: () => windowedMeanLineY
-                                    },
-                                    windowedMeanLineStyle.regular
-                                ),
-                                exit => exit.remove()
-                            )
-                            .on(
-                                "mouseover",
-                                (event,) =>
-                                    handleMouseOverBar(
-                                        container,
-                                        yAxis,
-                                        series,
-                                        statsRef.current,
-                                        event,
-                                        margin,
-                                        seriesStyles,
-                                        barSeriesStyle,
-                                        allowTooltipRef.current && showWindowedMeanValueLines,
-                                        mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue),
-                                        BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue
-                                    )
-                            )
-                            .on(
-                                "mouseleave",
-                                event => handleMouseLeaveSeries(
-                                    series.name,
-                                    event.currentTarget,
-                                    seriesStyles,
-                                    barSeriesStyle,
-                                    mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue),
-                                    BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue
-                                )
-                            )
+                        //
+                        // windowed-mean line
+                        if (showWindowedMeanValueLines) {
+                            const windowedMeanLineY = yAxis.scale(isNaN(seriesWindowedStats.mean) ? 0 : seriesWindowedStats.mean)
+                            const isHovered = hovered?.seriesName === series.name && hovered.elementType === 'windowedMeanValue'
+                            const style = isHovered ? windowedMeanLineStyle.highlight : windowedMeanLineStyle.regular
+                            drawLine(context2D, lower(x), windowedMeanLineY, upper(x), windowedMeanLineY, style)
+                            newGeometry.set(`${series.name}::windowedMeanValue`, {
+                                points: [],
+                                segments: [[
+                                    [lower(x) + margin.left, windowedMeanLineY + margin.top],
+                                    [upper(x) + margin.left, windowedMeanLineY + margin.top]
+                                ]],
+                                hitRadius: Math.max(4, style.width ?? 1)
+                            })
+                        }
                     }
 
                     //
-                    // value lines
-                    svg
-                        .select<SVGGElement>(`#${series.name}-${chartId}-bar`)
-                        .selectAll<SVGLineElement, PlotData>(classIdFor(BAR_CHART_CLASS_IDS.currentValue))
-                        .data(showValueLines ? plotData : [])
-                        .join(
-                            enter => lineFor(
-                                enter.append<SVGLineElement>('line').attr('class', BAR_CHART_CLASS_IDS.currentValue),
-                                {
-                                    x1: () => lower(x), y1: datum => yAxis.scale(datum.value),
-                                    x2: () => upper(x), y2: datum => yAxis.scale(datum.value)
-                                },
-                                valueLineStyle.regular
-                            ),
-                            update => lineFor(
-                                update,
-                                {
-                                    x1: () => lower(x), y1: datum => yAxis.scale(datum.value),
-                                    x2: () => upper(x), y2: datum => yAxis.scale(datum.value)
-                                },
-                                valueLineStyle.regular
-                            ),
-                            exit => exit.remove()
-                        )
-                        .on(
-                            "mouseover",
-                            (event,) =>
-                                handleMouseOverBar(
-                                    container,
-                                    yAxis,
-                                    series,
-                                    statsRef.current,
-                                    event,
-                                    margin,
-                                    seriesStyles,
-                                    barSeriesStyle,
-                                    allowTooltipRef.current && showValueLines,
-                                    mouseOverHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue),
-                                    BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue
-                                )
-                        )
-                        .on(
-                            "mouseleave",
-                            event => handleMouseLeaveSeries(
-                                series.name,
-                                event.currentTarget,
-                                seriesStyles,
-                                barSeriesStyle,
-                                mouseLeaveHandlerFor(`tooltip-${chartId}`, BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue),
-                                BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue
-                            )
-                        )
+                    // value line
+                    if (showValueLines) {
+                        const datum = plotData[0]
+                        const valueLineY = yAxis.scale(datum.value)
+                        const isHovered = hovered?.seriesName === series.name && hovered.elementType === 'currentValue'
+                        const style = isHovered ? valueLineStyle.highlight : valueLineStyle.regular
+                        drawLine(context2D, lower(x), valueLineY, upper(x), valueLineY, style)
+                        newGeometry.set(`${series.name}::currentValue`, {
+                            points: [],
+                            segments: [[
+                                [lower(x) + margin.left, valueLineY + margin.top],
+                                [upper(x) + margin.left, valueLineY + margin.top]
+                            ]],
+                            hitRadius: Math.max(4, style.width ?? 1)
+                        })
+                    }
+                })
+
+                geometryRef.current = newGeometry
+
+                context2D.restore()
+            }
+
+            /**
+             * Grows the auto-scaling y-axes (see `ContinuousAxis`'s `autoScale` prop) to fit what's
+             * shown of the series whose categories are on screen (within the x-axis' current,
+             * possibly zoomed, window): the min/max bars, the windowed min/max bars, the mean and
+             * windowed-mean lines, and the value lines -- each only when it's shown. Registered to
+             * run before the axes draw (they're at z-index 0), so the axes and the bars are drawn
+             * with the grown domain in the same frame.
+             */
+            const autoScaleYAxes = (): void => {
+                const extents = new Map<string, [min: number, max: number]>()
+                dataRef.current.forEach(series => {
+                    if (!series.name.match(seriesFilter) || series.data.length === 0) return
+                    const [xAxis, yAxis] = axesFor(
+                        series.name,
+                        axisAssignments,
+                        axisId => xAxesState.axisFor(axisId).getOrUndefined(),
+                        axisId => yAxesState.axisFor(axisId).getOrUndefined()
+                    )
+                    if (xAxis === undefined || yAxis?.autoScale === undefined) return
+
+                    // only the categories (at least partly) on screen
+                    const x = xAxis.scale(series.name)
+                    if (x === undefined || x + xAxis.scale.bandwidth() <= 0 || x >= plotDimensions.width) return
+
+                    // what's shown of the series (mirrors the draw function above)
+                    const values: Array<number> = []
+                    const stats = statsRef.current.valueStatsForSeries.get(series.name)
+                    if (showMinMaxBars && stats !== undefined) values.push(stats.min.value, stats.max.value)
+                    const windowedStats = statsRef.current.windowedValueStatsForSeries.get(series.name)
+                    if (windowedStats !== undefined) {
+                        if (showWindowedMinMaxBars) values.push(windowedStats.min.value, windowedStats.max.value)
+                        if (showMeanValueLines && stats !== undefined) values.push(stats.mean)
+                        if (showWindowedMeanValueLines) values.push(windowedStats.mean)
+                    }
+                    if (showValueLines) values.push(series.data[series.data.length - 1].value)
+
+                    const seriesExtent = extentOf(values, yAxis.scale)
+                    if (seriesExtent === undefined) return
+                    const extent = extents.get(yAxis.axisId)
+                    extents.set(
+                        yAxis.axisId,
+                        extent === undefined ? seriesExtent : extentWith(extentWith(extent, seriesExtent[0]), seriesExtent[1])
+                    )
+                })
+                // (the y-axes are continuous axes, even though this plot's axes context is typed
+                // for its ordinal x-axes)
+                growAutoScaledYAxes(extents, {
+                    yAxes: yAxesState.axes,
+                    axisRangeFor,
+                    updateAxisRanges: updateAxisRanges as unknown as AutoScaleAxes['updateAxisRanges'],
                 })
             }
+
+            cc.register(`bar-plot-autoscale-${chartId}`, autoScaleYAxes, -10)
+            cc.register(`bar-plot-${chartId}`, draw, 10)
+            cc.requestRedraw()
         },
         [
-            container,
-            panEnabled, zoomEnabled,
-            onPan, onZoom,
-            plotDimensions, margin, zoomKeyModifiersRequired,
-            axisAssignments, xAxesState, yAxesState,
-            barMargin, seriesStyles, barSeriesStyle,
-            seriesFilter,
-            chartId,
-            showValueLines,
-            showMinMaxBars,
-            mouseOverHandlerFor, mouseLeaveHandlerFor,
-            showMeanValueLines,
-            showWindowedMeanValueLines,
-            showWindowedMinMaxBars
+            chartId, plotDimensions, axisAssignments, xAxesState, yAxesState, barMargin, seriesStyles,
+            barSeriesStyle, seriesFilter, showValueLines, showMinMaxBars, showMeanValueLines,
+            showWindowedMeanValueLines, showWindowedMinMaxBars, axisRangeFor, updateAxisRanges,
+            margin.left, margin.top
         ]
     )
 
+    // new data, new scale: restarts the auto-scaling y-axes when the data source is replaced
+    useAutoScaleRestart(dataSource, {
+        yAxes: yAxesState.axes,
+        axisRangeFor,
+        updateAxisRanges: updateAxisRanges as unknown as AutoScaleAxes['updateAxisRanges'],
+    })
+
     // need to keep the function references for use by the subscription, which forms a closure
     // on them. without the references, the closures become stale, and resizing during streaming
     // doesn't work properly
-    const updatePlotRef = useRef<(ordinalRange: Map<string, OrdinalAxisRange>, g: GSelection) => void>(noop)
+    const updatePlotRef = useRef<(cc: CanvasContext) => void>(updatePlot)
     useEffect(
         () => {
-            if (mainG != null && container != null) {
-                // when the update plot function doesn't yet exist, then create the container holding the plot
-                const clipPathId = setClipPathG(chartId, mainG, plotDimensions)
-                if (updatePlotRef.current === noop) {
-                    mainG
-                        .selectAll<SVGGElement, BaseSeries<OrdinalDatum>>('g')
-                        .attr("clip-path", `url(#${clipPathId})`)
-                        .data<BaseSeries<OrdinalDatum>>(dataRef.current)
-                        .enter()
-                        .append('g')
-                        .attr('class', 'spikes-series')
-                        .attr('id', series => `${series.name}-${chartId}-bar`)
-                        .attr('transform', `translate(${margin.left}, ${margin.top})`)
+            updatePlotRef.current = updatePlot
+        },
+        [updatePlot]
+    )
 
-                } else {
-                    mainG
-                        .selectAll<SVGGElement, TimeSeries>('g')
-                        .attr("clip-path", `url(#${clipPathId})`)
-                }
-                updatePlotRef.current = updatePlot
+    useEffect(
+        () => {
+            currentTimeRef.current = 0
+        },
+        [xAxesState]
+    )
+
+    // set the axis assignments needed if a tooltip is being used
+    useEffect(
+        () => {
+            setAxisAssignments(axisAssignments)
+        },
+        [axisAssignments, setAxisAssignments]
+    )
+
+    // calculates the distinct series IDs that cover all the series in the plot
+    const axesForSeries = useMemo(
+        () => axesForSeriesGen<OrdinalDatum, OrdinalStringAxis>(initialData, axisAssignments, xAxesState),
+        [initialData, axisAssignments, xAxesState]
+    )
+
+    // redraws the plot for newly arrived data and reports the chart time, using the updatePlot
+    // reference (to avoid a stale updatePlot). Deliberately leaves the axes' ranges
+    // (`ordinalRangesRef`) alone: the ordinal axes don't scroll as data arrives, so only this plot's
+    // own zoom, pan, and resize handling changes them -- replacing them here (as a previous version
+    // did, with the y-axes' ranges) left the x-axis zoom/pan handlers with nothing to act on until
+    // something else happened to rebuild the map.
+    const updateTimingAndPlot = useCallback(
+        (): void => {
+            if (canvasContext !== null) {
+                // (one redraw request is enough: `onUpdateChartTime` only reports the time to the
+                // application, and redraw requests are coalesced into one animation frame anyway)
+                updatePlotRef.current(canvasContext)
+                onUpdateChartTime(currentTimeRef.current)
             }
         },
-        [chartId, container, mainG, margin, plotDimensions, updatePlot]
+        [canvasContext, onUpdateChartTime]
     )
 
-    // memoized function for subscribing to the chart-data observable
-    const subscribe = useCallback(
+    // when the initial data changes, then reset the plot. note that the initial data doesn't change
+    // during the normal course of updates from the data source, only when the data source is replaced.
+    useEffect(
         () => {
-            if (seriesObservable === undefined || mainG === null) return undefined
-            return subscriptionOrdinalXFor(
-                seriesObservable,
-                onSubscribe,
-                windowingTime,
-                axisAssignments,
-                yAxesState,
-                onUpdateData,
-                dropDataAfter,
-                updateTimingAndPlot,
-                // as new data flows into the subscription, the subscription
-                // updates this map directly (for performance)
-                seriesRef.current,
-                statsRef,
-                (currentTime: number) => currentTimeRef.current = currentTime,
-                AxisInterval.from(0, plotDimensions.width)
+            dataRef.current = initialData.slice()
+            seriesRef.current = new Map(initialData.map(series => [series.name, series]))
+            currentTimeRef.current = 0
+            statsRef.current = statsFrom(dataSource, dataRef.current)
+        },
+        [initialData, dataSource]
+    )
+
+    /**
+     * Adjusts the ordinal x-axes' ranges when the plot is dragged to the left or right (the caller
+     * redraws the plot)
+     * @param x The amount that the plot is dragged
+     * @param plotDimensions The dimensions of the plot
+     * @param series An array of series names
+     * @param ranges A map holding the axis ID and its associated range
+     */
+    const onPan = useCallback(
+        (x: number,
+         plotDimensions: Dimensions,
+         series: Array<string>,
+         ranges: Map<string, OrdinalAxisRange>
+        ) => ordinalPanHandler(axesForSeries, margin, setAxisIntervalFor, xAxesState)(x, plotDimensions, series, ranges),
+        [axesForSeries, margin, setAxisIntervalFor, xAxesState]
+    )
+
+    /**
+     * Called when the user uses the scroll wheel (or scroll gesture) to zoom in or out. Zooms in/out
+     * at the location of the mouse when the scroll wheel or gesture was applied.
+     * @param zoomFactor The *cumulative* zoom scale factor for this event -- d3-zoom's own
+     * `event.transform.k`, passed through unmodified. See {@link OrdinalAxisRange.scaledCumulative}
+     * for why the ordinal x-axis needs this cumulative factor (from which it derives the
+     * incremental step itself, and which it snaps back to `.original` at exactly 1).
+     * @param x The x-position of the mouse when the scroll wheel or gesture is used
+     * @param plotDimensions The dimensions of the plot
+     * @param ranges A map holding the axis ID and its associated range
+     */
+    const onZoom = useCallback(
+        (
+            zoomFactor: number,
+            x: number,
+            plotDimensions: Dimensions,
+            ranges: Map<string, OrdinalAxisRange>,
+        ) => ordinalAxisZoomHandler(axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState)(zoomFactor, x, plotDimensions, ranges),
+        [axesForSeries, margin, setAxisIntervalFor, setOriginalAxisIntervalFor, xAxesState]
+    )
+
+    // holds the current per-axis ordinal ranges, kept in sync by the effect below. Replaces
+    // threading `ordinalRanges` through as an explicit `updatePlot` parameter, so the pan/zoom
+    // handlers (now set up once, in a separate effect below, rather than inside `updatePlot`
+    // itself) can always read the current ranges without needing `updatePlot` to be recreated
+    // every time the ranges change.
+    const ordinalRangesRef = useRef<Map<string, OrdinalAxisRange>>(new Map())
+
+    // hands the current zoom/pan state (the ordinal x-axes' ranges, as fractions of their
+    // original extent, and d3-zoom's cumulative `k`) to the `onZoomStateChange` callback
+    const reportZoomState = useCallback(
+        (cc: CanvasContext): void => {
+            const ranges: Record<string, [number, number]> = {}
+            ordinalRangesRef.current.forEach((range, axisId) => {
+                const extent = range.original.measure()
+                if (xAxesState.axes.has(axisId) && extent > 0) {
+                    ranges[axisId] = [
+                        (range.current.start - range.original.start) / extent,
+                        (range.current.end - range.original.start) / extent
+                    ]
+                }
+            })
+            onZoomStateChange({k: d3.zoomTransform(cc.canvas).k, ranges})
+        },
+        [onZoomStateChange, xAxesState.axes]
+    )
+
+    // panning (dragging) and zooming (the mouse wheel) -- see `useCanvasZoomPan`. The ordinal zoom
+    // takes d3-zoom's cumulative scale (`k`), rather than the incremental factor, so that it can
+    // snap back to the original range exactly when fully zoomed out (see `OrdinalAxisRange.scale`)
+    const {setZoomScale} = useCanvasZoomPan(canvasContext, {
+        panEnabled,
+        zoomEnabled,
+        keyModifiersRequired: zoomKeyModifiersRequired,
+        scaleExtent: [1, 10],
+        // (an ordinal axis zooms in as d3-zoom's scale goes up, the opposite way to the other
+        // plots' continuous axes, so the wheel is inverted to zoom the same way as they do)
+        invertWheel: true,
+        translateExtent: [[margin.left, margin.top], [plotDimensions.width, plotDimensions.height]],
+        // (tooltips are suppressed while panning, so that one isn't left behind)
+        onPanStart: () => {
+            allowTooltipRef.current = false
+        },
+        onPan: dx => {
+            if (canvasContext === null) return
+            onPan(dx, plotDimensions, dataRef.current.map(series => series.name), ordinalRangesRef.current)
+            updatePlotRef.current(canvasContext)
+        },
+        onPanEnd: () => {
+            allowTooltipRef.current = !(dataSource?.running ?? false)
+            if (canvasContext !== null) reportZoomState(canvasContext)
+        },
+        onZoom: ({k, x}) => {
+            if (canvasContext === null) return
+            onZoom(k, x - margin.left, plotDimensions, ordinalRangesRef.current)
+            updatePlotRef.current(canvasContext)
+            reportZoomState(canvasContext)
+        },
+        onZoomReset,
+        // restores each axis's range to its original
+        resetView: () => {
+            ordinalRangesRef.current.forEach((range, axisId) => {
+                xAxesState.axisFor(axisId).ifPresent(axis => {
+                    ordinalRangesRef.current.set(axisId, range.update(range.original.start, range.original.end))
+                    setAxisIntervalFor(axisId, range.original)
+                    axis.update(axis.scale.domain(), range.original, range.original, plotDimensions, margin)
+                })
+            })
+            if (canvasContext !== null) updatePlotRef.current(canvasContext)
+        },
+    })
+
+    // the zoom state to restore, captured once at mount (see the `zoomState` prop); cleared once
+    // it has been applied (see `restoreZoomState` below), so it's only ever applied once
+    const pendingZoomStateRef = useRef<BarPlotZoomState | undefined>(zoomState)
+
+    // applies the pending zoom state (if any) to the ordinal x-axes' ranges and to d3-zoom's
+    // transform on the canvas -- a remounted plot has a brand-new canvas, whose d3-zoom transform
+    // starts at identity (k = 1). Both must be restored together: the ordinal zoom math derives
+    // its incremental step from d3's cumulative `k` relative to the range's current/original width
+    // ratio, and treats `k === 1` as "snap back to fully zoomed out" (see
+    // `OrdinalAxisRange.scaledCumulative`), so restoring the ranges without `k` would make the
+    // very next wheel tick jump. Waits (leaving the state pending) until every axis in the
+    // snapshot exists, since the axes register themselves with the chart asynchronously.
+    const restoreZoomState = useCallback(
+        (): void => {
+            const pending = pendingZoomStateRef.current
+            if (pending === undefined) return
+            const axisIds = Object.keys(pending.ranges)
+            const ready = axisIds.every(axisId =>
+                ordinalRangesRef.current.has(axisId) && xAxesState.axisFor(axisId).getOrUndefined() !== undefined
             )
+            if (!ready || plotDimensions.width <= 0) return
+
+            axisIds.forEach(axisId => {
+                const range = ordinalRangesRef.current.get(axisId)
+                const axis = xAxesState.axisFor(axisId).getOrUndefined()
+                if (range === undefined || axis === undefined) return
+                const [startFraction, endFraction] = pending.ranges[axisId]
+                const {start: originalStart} = range.original
+                const extent = range.original.measure()
+                const current = AxisInterval.from(originalStart + startFraction * extent, originalStart + endFraction * extent)
+                ordinalRangesRef.current.set(axisId, range.update(current.start, current.end))
+                setAxisIntervalFor(axisId, current)
+                axis.update(axis.scale.domain(), current, range.original, plotDimensions, margin)
+            })
+            // (set directly, without dispatching a "zoom" event -- see `setZoomScale`)
+            setZoomScale(pending.k)
+            pendingZoomStateRef.current = undefined
         },
-        [
-            axisAssignments, dropDataAfter, mainG,
-            onSubscribe, onUpdateData,
-            seriesObservable, updateTimingAndPlot, windowingTime, yAxesState,
-            plotDimensions.width
-        ]
+        [margin, plotDimensions, setAxisIntervalFor, xAxesState, setZoomScale]
     )
 
+
+
     useEffect(
         () => {
-            if (container && mainG) {
+            if (canvasContext) {
                 const ordinalAxesRanges = axesRanges()
                 // so this gets a bit complicated. the ordinal-ranges need to be updated whenever the ordinal-ranges
                 // change. for example, when the window is resized, and then we need to update the
                 // ordinal-range. however, we want to keep the ordinal-ranges to reflect their original scale so that
                 // we can zoom properly (so the updates can't fuck with the scale).
                 if (ordinalAxesRanges.size === 0) {
-                    // when no time-ranges have yet been created, then create them and hold on to a mutable
-                    // reference to them
-                    updatePlot(ordinalAxisRanges(xAxesState.axes, AxisInterval.from(0, plotDimensions.width)), mainG)
+                    // when no time-ranges have yet been created, then create them and populate the
+                    // existing ref's map in place (rather than replacing it -- reassigning `.current`
+                    // once it's already in play elsewhere, e.g. the zoom/pan handlers, isn't allowed
+                    // by react-hooks/immutability)
+                    ordinalRangesRef.current.clear()
+                    ordinalAxisRanges(xAxesState.axes)
+                        .forEach((range, id) => ordinalRangesRef.current.set(id, range))
                 } else {
                     // when the ordinal-ranges already exist, then we want to update the ordinal-ranges for each
                     // existing ordinal-range in a way that maintains the original scale.
@@ -777,29 +776,188 @@ export function BarPlot(props: Props): null {
                                     rangesMap.set(id, range.update(start, end) as OrdinalAxisRange)
                                 })
                         })
-                    updatePlot(ordinalAxesRanges, mainG)
+                    ordinalRangesRef.current.clear()
+                    ordinalAxesRanges.forEach((range, id) => ordinalRangesRef.current.set(id, range))
+                }
+                // restore a zoom state handed in from a previous instance (only does anything the
+                // first time the axes are all available -- see `restoreZoomState`)
+                restoreZoomState()
+                updatePlot(canvasContext)
+            }
+        },
+        [axesRanges, canvasContext, plotDimensions.width, updatePlot, xAxesState.axes, restoreZoomState]
+    )
+
+    // wires up a single mousemove/mouseleave listener on the shared canvas to replace the old
+    // per-element SVG mouseover/mouseleave handlers. Hit-tests the mouse position against the
+    // last-drawn geometry (see `geometryRef`, populated by the draw function above), keyed per
+    // `${seriesName}::${elementType}` so the five overlaid elements resolve independently.
+    useEffect(
+        () => {
+            if (!canvasContext) return
+
+            const canvas = canvasContext.canvas
+
+            // highlights (or un-highlights) the x- and y-axes a series is plotted against --
+            // keyed on the series name alone (not the specific hovered element type), so moving
+            // the mouse between a series' own bar/lines doesn't flicker the highlight off and on.
+            // Unlike Scatter/Outlier, bar series styles don't carry a single flat highlight
+            // color/width (they're nested per element type), so this uses the axis' own default
+            // highlight styling rather than trying to match a specific element's highlight style.
+            const highlightAxesFor = (seriesName: string, isHighlighted: boolean): void => {
+                if (!highlightAxesOnMouseOver) return
+                const [xAxis, yAxis] = axesFor(
+                    seriesName,
+                    axisAssignments,
+                    axisId => xAxesState.axisFor(axisId).getOrUndefined(),
+                    axisId => yAxesState.axisFor(axisId).getOrUndefined()
+                )
+                xAxis?.setHighlighted(isHighlighted)
+                yAxis?.setHighlighted(isHighlighted)
+            }
+
+            const handleMove = (event: MouseEvent) => {
+                const [x, y] = canvasLocalPoint(event, canvas)
+                const hit = seriesAt(x, y, geometryRef.current)
+                // geometry keys are "${seriesName}::${elementType}"; split back apart
+                const [hitSeriesName, hitElementType] = hit !== undefined ? hit.name.split('::') : [undefined, undefined]
+
+                const previous = lastHoveredRef.current
+                const sameAsBefore = previous !== undefined && hitSeriesName === previous.seriesName && hitElementType === previous.elementType
+
+                if (previous?.seriesName !== hitSeriesName) {
+                    if (previous !== undefined) highlightAxesFor(previous.seriesName, false)
+                    if (hitSeriesName !== undefined) highlightAxesFor(hitSeriesName, true)
+                }
+
+                if (!sameAsBefore) {
+                    if (previous !== undefined) {
+                        handleMouseLeaveSeries(
+                            previous.seriesName,
+                            mouseLeaveHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[previous.elementType])
+                        )
+                    }
+
+                    if (hitSeriesName !== undefined && hitElementType !== undefined) {
+                        const series = seriesRef.current.get(hitSeriesName)
+                        const yAxis = axesFor(
+                            hitSeriesName,
+                            axisAssignments,
+                            axisId => xAxesState.axisFor(axisId).getOrUndefined(),
+                            axisId => yAxesState.axisFor(axisId).getOrUndefined()
+                        )[1]
+                        const showingByType: Record<string, boolean> = {
+                            minMax: showMinMaxBars,
+                            windowedMinMax: showWindowedMinMaxBars,
+                            meanValue: showMeanValueLines,
+                            windowedMeanValue: showWindowedMeanValueLines,
+                            currentValue: showValueLines,
+                        }
+                        if (series !== undefined && yAxis !== undefined && allowTooltipRef.current && showingByType[hitElementType]) {
+                            handleMouseOverBar(
+                                yAxis,
+                                series,
+                                statsRef.current,
+                                [x, y],
+                                margin,
+                                mouseOverHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[hitElementType])
+                            )
+                        }
+                    }
+
+                    lastHoveredRef.current = hitSeriesName !== undefined && hitElementType !== undefined ?
+                        {seriesName: hitSeriesName, elementType: hitElementType} :
+                        undefined
+
+                    // the value-line and windowed-mean-line highlight depends on hover state, so
+                    // request a redraw when it changes
+                    canvasContext.requestRedraw()
+                }
+            }
+
+            const handleLeaveCanvas = () => {
+                const previous = lastHoveredRef.current
+                if (previous !== undefined) {
+                    handleMouseLeaveSeries(previous.seriesName, mouseLeaveHandlerFor(`tooltip-${chartId}`, PROVIDER_ID_FOR_ELEMENT_TYPE[previous.elementType]))
+                    highlightAxesFor(previous.seriesName, false)
+                    lastHoveredRef.current = undefined
+                    canvasContext.requestRedraw()
                 }
             }
+
+            canvas.addEventListener('mousemove', handleMove)
+            canvas.addEventListener('mouseleave', handleLeaveCanvas)
+            return () => {
+                canvas.removeEventListener('mousemove', handleMove)
+                canvas.removeEventListener('mouseleave', handleLeaveCanvas)
+            }
+        },
+        [
+            canvasContext, chartId, margin, axisAssignments, xAxesState, yAxesState,
+            mouseOverHandlerFor, mouseLeaveHandlerFor,
+            showMinMaxBars, showWindowedMinMaxBars, showMeanValueLines, showWindowedMeanValueLines, showValueLines,
+            highlightAxesOnMouseOver
+        ]
+    )
+
+    // the latest `updateTimingAndPlot`, for the view driver to call -- the driver is created once
+    // per run (see below), so it must not capture a stale one (e.g. bound to an older canvas)
+    const updateTimingAndPlotRef = useRef(updateTimingAndPlot)
+    useEffect(
+        () => {
+            updateTimingAndPlotRef.current = updateTimingAndPlot
         },
-        [axesRanges, container, mainG, plotDimensions.width, updatePlot, xAxesState.axes]
+        [updateTimingAndPlot]
+    )
+
+    // creates the view driver that keeps this plot's view in step with the data source, using the
+    // current settings -- see `useStreamingTimeAxes`'s identical effect event
+    const createViewDriver = useEffectEvent(
+        (source: NonNullable<typeof dataSource>) => ordinalViewDriverFor(
+            source,
+            windowingTime,
+            () => updateTimingAndPlotRef.current(),
+            currentTime => currentTimeRef.current = currentTime,
+        )
     )
 
-    // subscribe/unsubscribe to the observable chart data. when the `shouldSubscribe`
-    // is changed to `true` and we haven't subscribed yet, then subscribe. when the
-    // `shouldSubscribe` is `false` and we had subscribed, then unsubscribe. otherwise,
-    // do nothing.
+    // while the data source is running (and this plot has a canvas), drive the view from the
+    // data source's updates -- see `useStreamingTimeAxes`'s identical effect. The driver belongs to this plot
+    // instance alone and is always torn down with it.
     useEffect(
         () => {
-            if (shouldSubscribe && subscriptionRef.current === undefined) {
-                subscriptionRef.current = subscribe()
-                allowTooltipRef.current = false
-            } else if (!shouldSubscribe && subscriptionRef.current !== undefined) {
-                subscriptionRef.current?.unsubscribe()
-                subscriptionRef.current = undefined
+            if (dataSource === undefined || !running || canvasContext === null) return
+            allowTooltipRef.current = false
+            const driver = createViewDriver(dataSource)
+            return () => {
+                driver.unsubscribe()
                 allowTooltipRef.current = true
             }
         },
-        [shouldSubscribe, subscribe]
+        [dataSource, running, canvasContext]
+    )
+
+    // this plot needs a data source (see the `Chart`'s `dataSource` prop)
+    useEffect(
+        () => {
+            if (dataSource === undefined) {
+                console.error("BarPlot requires a data source; set the enclosing Chart's `dataSource` prop")
+            }
+        },
+        [dataSource]
+    )
+
+    // unregister this plot's draw function on unmount
+    useEffect(
+        () => {
+            return () => {
+                if (canvasContext) {
+                    canvasContext.unregister(`bar-plot-autoscale-${chartId}`)
+                    canvasContext.unregister(`bar-plot-${chartId}`)
+                }
+            }
+        },
+        [canvasContext, chartId]
     )
 
     return null
@@ -809,11 +967,6 @@ export function BarPlot(props: Props): null {
     Helper functions and types
  */
 
-type PlotData = {
-    data: OrdinalDatum,
-    stats: OrdinalStats,
-}
-
 type BarDimensions = {
     upperX: number
     upperY: number
@@ -821,6 +974,12 @@ type BarDimensions = {
     height: number
 }
 
+/**
+ * The bar style, made fully transparent when the bar isn't shown
+ * @param isVisible Whether the bar is shown
+ * @param style The bar's style
+ * @return The style (with its fill and stroke opacities 0 when the bar isn't shown)
+ */
 function barStyleFor(isVisible: boolean, style: BarStyle): BarStyle {
     return {
         ...style,
@@ -829,6 +988,12 @@ function barStyleFor(isVisible: boolean, style: BarStyle): BarStyle {
     }
 }
 
+/**
+ * The fill or stroke style, made fully transparent when its element isn't shown
+ * @param isVisible Whether the element is shown
+ * @param style The fill or stroke style
+ * @return The style (with an opacity of 0 when the element isn't shown)
+ */
 function updateOpacityFor<S extends SvgFillStyle | SvgStrokeStyle>(isVisible: boolean, style: S): S {
     return {
         ...style,
@@ -837,53 +1002,51 @@ function updateOpacityFor<S extends SvgFillStyle | SvgStrokeStyle>(isVisible: bo
 }
 
 /**
- * Sets the attributes for the bar based on the d3 selection
- * @param selection The d3 selection (rect SVG element)
- * @param dimensions The bar dimensions
+ * Draws a bar (rectangle) onto the canvas context. Replaces the old `barFor`, which set SVG
+ * `<rect>` attributes via a d3 selection.
+ * @param context The canvas 2D context
+ * @param dimensions The bar's dimensions
  * @param style The bar style holding the fill and stroke styles
- * @return The updated SVG selection (rect SVG element)
  */
-function barFor(
-    selection: d3.Selection<SVGRectElement, OrdinalDatum, SVGGElement, any>,
+function drawBar(
+    context: CanvasRenderingContext2D,
     dimensions: BarDimensions,
     style: BarStyle
-): d3.Selection<SVGRectElement, OrdinalDatum, SVGGElement, any> {
-    selection
-        .attr('x', () => dimensions.upperX)
-        .attr('y', () => dimensions.upperY)
-        .attr('width', () => dimensions.width)
-        .attr('height', () => dimensions.height)
-
-    return applyStrokeStylesTo(applyFillStylesTo(selection, style.fill), style.stroke)
-}
+): void {
+    if (dimensions.width <= 0 || dimensions.height <= 0) return
 
-type PathSegment = {
-    x1: (datum: OrdinalDatum) => number,
-    y1: (datum: OrdinalDatum) => number,
-    x2: (datum: OrdinalDatum) => number,
-    y2: (datum: OrdinalDatum) => number,
+    applyFillStyle(context, style.fill)
+    context.fillRect(dimensions.upperX, dimensions.upperY, dimensions.width, dimensions.height)
+
+    if ((style.stroke.width ?? 0) > 0) {
+        applyStrokeStyle(context, style.stroke)
+        context.strokeRect(dimensions.upperX, dimensions.upperY, dimensions.width, dimensions.height)
+    }
 }
 
 /**
- * Creates the line segment for values and means
- * @param selection The d3 selection (rect SVG element)
- * @param pathSegment The object containing functions for extracting the (x1, y1) and (x2, y2)
- * points for the path segment
+ * Draws a horizontal line segment (used for the value/mean/windowed-mean lines) onto the canvas
+ * context. Replaces the old `lineFor`, which set SVG `<line>` attributes via a d3 selection.
+ * @param context The canvas 2D context
+ * @param x1 The line's start x-coordinate
+ * @param y1 The line's start y-coordinate
+ * @param x2 The line's end x-coordinate
+ * @param y2 The line's end y-coordinate
  * @param strokeStyle The stroke style
- * @return The updated SVG selection (rect SVG element)
  */
-function lineFor(
-    selection: d3.Selection<SVGLineElement, OrdinalDatum, SVGGElement, any>,
-    pathSegment: PathSegment,
+function drawLine(
+    context: CanvasRenderingContext2D,
+    x1: number,
+    y1: number,
+    x2: number,
+    y2: number,
     strokeStyle: Partial<SvgStrokeStyle>
-) {
-    selection
-        .attr('x1', datum => pathSegment.x1(datum))
-        .attr('y1', datum => pathSegment.y1(datum))
-        .attr('x2', datum => pathSegment.x2(datum))
-        .attr('y2', datum => pathSegment.y2(datum))
-
-    return applyStrokeStylesTo(selection, strokeStyle)
+): void {
+    applyStrokeStyle(context, strokeStyle)
+    context.beginPath()
+    context.moveTo(x1, y1)
+    context.lineTo(x2, y2)
+    context.stroke()
 }
 
 /**
@@ -915,17 +1078,15 @@ function barDimensions(widthFraction: number, lowerX: number, upperX: number, mi
 }
 
 /**
- * Calculates the ordinal stats for each of the ordinal series (generally, initial data) and
- * returns a {@link WindowedOrdinalStats} object
- * @param series The array of ordinal series
- * @return A {@link WindowedOrdinalStats} object with the stats for each of the series
+ * @param dataSource The chart's data source
+ * @param series The series to calculate the stats for when the data source doesn't keep them
+ * @return The data source's (live) stats when it keeps them (i.e. an ordinal data source);
+ * otherwise, the stats calculated from the specified series
  */
-function initialOrdinalStats(series: Array<OrdinalSeries>): WindowedOrdinalStats {
-    const ordinalStats = calculateOrdinalStats(series)
-    return {
-        ...ordinalStats,
-        windowedValueStatsForSeries: copyValueStatsForSeries(ordinalStats.valueStatsForSeries)
-    }
+function statsFrom(dataSource: unknown, series: Array<BaseSeries<OrdinalDatum>>): WindowedOrdinalStats {
+    return dataSource !== null && typeof dataSource === 'object' && 'stats' in dataSource ?
+        (dataSource as {stats: WindowedOrdinalStats}).stats :
+        initialOrdinalStats(series)
 }
 
 /**
@@ -940,16 +1101,17 @@ type CategoryBounds = {
 }
 
 /**
- * Attempts to locate the x- and y-axes for the specified series. If no axis is found for the
- * series name, then uses the default returned by the useChart() hook.
+ * Attempts to locate the x- and y-axes for the specified series. If the series has no axis
+ * assignment, then uses the default (first) x- and y-axes.
  * @param seriesName Name of the series for which to retrieve the axis
  * @param axisAssignments A map holding the series name and the associated x- and y-axes assigned
  * to that series. Note that the series in the axis-assignment map is merely a subset of the set
  * of series names.
  * @param xAxisFor The function that accepts an axis ID and returns the corresponding x-axis
  * @param yAxisFor The function that accepts an axis ID and returns the corresponding y-axis
- * @return A 2d tuple holding the linear x-axis as its first element and the category y-axis as
- * the second element.
+ * @return A 2d tuple holding the category x-axis as its first element and the linear y-axis as
+ * the second element (either is actually `undefined` when it isn't found, despite the type).
+ * @throws Error when the x-axis isn't a category axis, or the y-axis isn't a continuous numeric axis
  */
 function axesFor(
     seriesName: string,
@@ -959,25 +1121,23 @@ function axesFor(
 ): [xAxis: OrdinalStringAxis, yAxis: ContinuousNumericAxis] {
     const axes = axisAssignments.get(seriesName)
     const xAxis = xAxisFor(axes?.xAxis || "")
+    checkAxisType("BarPlot", "x", xAxis, AxisType.OrdinalString)
     const xAxisCategory = xAxis as OrdinalStringAxis
-    if (xAxis && !xAxisCategory) {
-        throw Error("Bar plot requires that x-axis be of type CategoryAxis")
-    }
     const yAxis = yAxisFor(axes?.yAxis || "")
+    checkAxisType("BarPlot", "y", yAxis, AxisType.ContinuousNumeric)
     const yAxisContinuous = yAxis as ContinuousNumericAxis
-    if (yAxis && !yAxisContinuous) {
-        throw Error("Bar plot requires that y-axis be of type ContinuousNumericAxis")
-    }
     return [xAxisCategory, yAxisContinuous]
 }
 
 /**
- * Calculates the upper and lower coordinate for the category
- * @param categorySize The size of the category (i.e. plot_height / num_series)
+ * Calculates the lower (left) and upper (right) x-coordinates of a category's lines, inside its
+ * margins
+ * @param categorySize The size of the category (i.e. plot_width / num_series)
  * @param lineWidth The width of the series line
- * @param margin The margin applied to the top and bottom of the spike line (vertical spacing)
- * @return An object with two functions, that when handed a y-coordinate, return the location
- * for the start (yUpper) or end (yLower) of the spikes line.
+ * @param margin The margin applied to the left and right of the category's lines (horizontal spacing)
+ * @return An object with two functions, that when handed the category's (left) x-coordinate,
+ * return the location of the start (lower) or end (upper) of its lines (when the category is no
+ * wider than the margin, the lines are just the line width long)
  */
 function xAxisCategoryBoundsFn(categorySize: number, lineWidth: number, margin: number): CategoryBounds {
     if (categorySize <= margin) return {
@@ -991,97 +1151,55 @@ function xAxisCategoryBoundsFn(categorySize: number, lineWidth: number, margin:
 }
 
 /**
- * Renders a tooltip showing for the bar in the bar chart (see {@link BarPlotTooltipContent})
- * @param container The chart container
+ * Reports a tooltip for the hovered element of a series in the bar chart (see {@link BarPlotTooltipContent}).
+ * Replaces the old version, which also mutated the hovered SVG element's stroke directly for the
+ * two element types that support a highlight (`currentValue`, `windowedMeanValue`); that highlight
+ * is now handled by the draw function checking the hover state (see `updatePlot`'s `draw`) rather
+ * than by touching an element here.
  * @param yAxis The y-axis
  * @param selectedSeries The selected series
  * @param seriesStats The statistics about the current series
- * @param event The mouse-over series event holding the line element
+ * @param mouseCoords The `[x, y]` position of the mouse, in canvas coordinates
  * @param margin The plot margin
- * @param barStyles The series style information (needed for (un)highlighting)
- * @param defaultBarSeriesStyle The default bar series style that is used if no style is found for the series
- * @param allowTooltip When set to `false` won't show tooltip, even if it is visible (used by pan)
  * @param mouseOverHandlerFor The handler for the mouse over (registered by the <Tooltip/>)
- * @param tooltipProvider The ID of the tooltip provider
  */
 function handleMouseOverBar(
-    container: SVGSVGElement,
     yAxis: ContinuousNumericAxis,
     selectedSeries: BaseSeries<OrdinalDatum>,
     seriesStats: WindowedOrdinalStats,
-    event: React.MouseEvent<SVGLineElement>,
+    mouseCoords: [x: number, y: number],
     margin: Margin,
-    barStyles: Map<string, BarSeriesStyle>,
-    defaultBarSeriesStyle: BarSeriesStyle,
-    allowTooltip: boolean,
     mouseOverHandlerFor: ((
         seriesName: string,
         value: number,
         tooltipData: TooltipData<OrdinalDatum, WindowedOrdinalStats>,
         mouseCoords: [x: number, y: number]
     ) => void) | undefined,
-    tooltipProvider?: string
 ): void {
-    // grab the time needed for the tooltip ID
-    const [x, y] = d3.pointer(event, container)
+    const [, y] = mouseCoords
     const value = yAxis.scale.invert(y - margin.top)
 
     const {name: categoryName, data: selectedData} = selectedSeries
 
-    const barSeriesStyle = barStyles.get(categoryName) || defaultBarSeriesStyle
-    const lineStyle = lineStyleFor(tooltipProvider, barSeriesStyle)
-    if (lineStyle !== undefined) {
-        d3.select<SVGPathElement, Datum>(event.currentTarget)
-            .style(STROKE_COLOR, lineStyle.highlight.color)
-            .style(STROKE_WIDTH, lineStyle.highlight.width)
-            .style(STROKE_OPACITY, lineStyle.highlight.opacity)
-    }
-
-    if (mouseOverHandlerFor && allowTooltip) {
+    if (mouseOverHandlerFor) {
         // the contract for the mouse over handler is for a series
-        mouseOverHandlerFor(categoryName, value, {series: selectedData, metadata: seriesStats}, [x, y])
+        mouseOverHandlerFor(categoryName, value, {series: selectedData, metadata: seriesStats}, mouseCoords)
     }
 }
 
 /**
- * Unselects the time series and calls the mouse-leave-series handler registered for this series.
+ * Calls the mouse-leave-series handler registered for this series. Replaces the old version, which
+ * also reset the hovered SVG element's stroke color/width directly; that reset is now implicit --
+ * once the hover state no longer matches this element, the next redraw simply paints it in its
+ * normal (non-highlighted) style.
  * @param seriesName The name of the series (i.e. the neuron ID)
- * @param segment The SVG line element representing the spike, over which the mouse is hovering.
- * @param seriesStyles The styles for the series (for (un)highlighting)
- * @param defaultBarSeriesStyle The default bar series style that is used if no style is found for the series
  * @param mouseLeaverHandlerFor Registered handler for the series when the mouse leaves
- * @param tooltipProvider The tooltip provider ID for the mouse-over event
  */
 function handleMouseLeaveSeries(
     seriesName: string,
-    segment: SVGLineElement,
-    seriesStyles: Map<string, BarSeriesStyle>,
-    defaultBarSeriesStyle: BarSeriesStyle,
     mouseLeaverHandlerFor: ((seriesName: string) => void) | undefined,
-    tooltipProvider?: string
 ): void {
-    const barSeriesStyle = seriesStyles.get(seriesName) || defaultBarSeriesStyle
-    const lineStyle = lineStyleFor(tooltipProvider, barSeriesStyle)
-    if (lineStyle !== undefined) {
-        d3.select<SVGPathElement, Datum>(segment)
-            .style(STROKE_COLOR, lineStyle.regular.color)
-            .style(STROKE_WIDTH, lineStyle.regular.width)
-            .style(STROKE_OPACITY, lineStyle.regular.opacity)
-    }
-
     if (mouseLeaverHandlerFor) {
         mouseLeaverHandlerFor(seriesName)
     }
 }
-
-function lineStyleFor(tooltipProvider: string | undefined, barSeriesStyle: BarSeriesStyle): LineStyle | undefined {
-    const {valueLine, windowedMeanValueLine} = barSeriesStyle
-    switch (tooltipProvider) {
-        case BAR_CHART_TOOLTIP_PROVIDER_IDS.currentValue:
-            return valueLine
-        case BAR_CHART_TOOLTIP_PROVIDER_IDS.windowedMeanValue:
-            return windowedMeanValueLine
-        default:
-            return undefined
-    }
-}