stream-charts 1.2.1 → 2.0.0

package/src/app/charts/axes/ContinuousAxis.tsx

@@ -1,21 +1,24 @@
 import {
-    addContinuousNumericXAxis,
-    addContinuousNumericYAxis,
-    AxesFont,
+    type AxesFont,
     AxisLocation,
-    ContinuousNumericAxis,
     defaultAxesFont,
-    labelIdFor
+    type SeriesStyle,
+    addContinuousNumericXAxis,
+    addContinuousNumericYAxis,
+    removeContinuousXAxis,
+    removeContinuousYAxis,
+    type ContinuousNumericAxis
 } from "./axes";
 import {useChart} from "../hooks/useChart";
 import {useEffect, useRef} from "react";
 import * as d3 from "d3";
-import {ScaleContinuousNumeric} from "d3";
-import {Dimensions, Margin} from "../styling/margins";
+import type {ScaleContinuousNumeric} from "d3";
+import type {Dimensions, Margin} from "../styling/margins";
 import {usePlotDimensions} from "../hooks/usePlotDimensions";
-import {Datum} from "../series/timeSeries";
+import type {Datum} from "../series/timeSeries";
 import {AxisInterval} from "./AxisInterval";
 import {ContinuousAxisRange} from "./ContinuousAxisRange";
+import {type AutoScale, clampedDomain, sameAutoScale, warnOnce} from "./autoScale";
 
 export interface Props {
     // the unique ID of the axis
@@ -42,28 +45,69 @@ export interface Props {
     // of the raster chart specifies the axis domain as a tuple-literal, then
     // the bounds will get reset to their original value with each render.
     //
-    // However, for charts that don't scroll, such as the iterates chart, but where
-    // the user would like to change axis-bounds, say for a different iterates
-    // function, we would like the axis bounds to be reset based on a change to
-    // the object ref instead. In this case, we can set this property to false.
+    // For charts that don't scroll, such as the "iterates" chart, we would like
+    // the axis bounds to be reset based on a change to the object ref instead.
+    // This is because the user may want to change axis-bounds, for example, when
+    // for a different "iterates" function is selected. And in such a case, we set
+    // this property to false.
     updateAxisBasedOnDomainValues?: boolean
+    /**
+     * When `true`, the axis' domain grows to fit the data plotted against it: when the data on
+     * screen goes above (or below) the domain, the domain grows to include it (plus the
+     * `autoScalePadding`), but never past `autoScaleMax` (or `autoScaleMin`). The axis starts out
+     * at the `domain` prop, clamped to those limits. The domain only ever grows -- it's restored
+     * to its start when the plot's data is replaced (e.g. on a reset), or when the `domain` prop
+     * or the limits change. When `false` (the default), the domain is exactly the `domain` prop.
+     *
+     * For y-axes only (an x-axis' domain follows time, and its zooming and panning), in the plots
+     * that support it (the scatter, bar, and outlier plots). Elsewhere, it's ignored, with a warning.
+     */
+    autoScale?: boolean
+    /**
+     * The smallest value an auto-scaling axis' domain may reach. Defaults to `-Infinity` (no
+     * limit).
+     */
+    autoScaleMin?: number
+    /**
+     * The largest value an auto-scaling axis' domain may reach. Defaults to `Infinity` (no limit).
+     */
+    autoScaleMax?: number
+    /**
+     * The fraction of the axis' length left beyond the data's extreme when the axis grows, so the
+     * extreme point isn't drawn right on the edge (in the scale's own space, e.g. logarithmically
+     * for a log scale). From 0 to 0.45 (a larger value is treated as 0.45); defaults to 0.05.
+     */
+    autoScalePadding?: number
+    /**
+     * The auto-scaled domain to start from when auto-scaling starts (e.g. when the axis is
+     * created), instead of the `domain` prop -- for keeping the axis' growth across remounts (e.g.
+     * navigating away from the chart and back), along with `onAutoScale`. Clamped to the limits.
+     */
+    autoScaledDomain?: [min: number, max: number]
+    /**
+     * Called with the axis' new domain whenever an auto-scaling axis grows, or is restored to its
+     * start (e.g. on a reset), so that it can be kept (see `autoScaledDomain`)
+     * @param domain The axis' new domain
+     */
+    onAutoScale?: (domain: [min: number, max: number]) => void
 }
 
 /**
- * Represents a continuous numeric axis (x or y) that can be place on the top, bottom,
+ * Represents a continuous numeric axis (x or y) that can be placed on the top, bottom,
  * left, or right of the chart. The domain (axis range) can be managed by this axis
- *  component or managed externally (i.e. deferred). This component returns null, meaning
- * React won't render it because we are updating the SVG element and don't want React
- * involved, except to call this function if the props change.
+ * component or managed externally (i.e. deferred). This component returns null, meaning
+ * React won't render it because we are drawing directly onto the chart's shared canvas and
+ * don't want React involved, except to call this function if the props change.
  * @param props The properties for the axis
+ * @return `null` (the axis draws onto the chart's canvas)
  */
 export function ContinuousAxis(props: Props): null {
     const {
         chartId,
-        container,
+        canvasContext,
         axes,
         color
-    } = useChart<Datum, any, any, ContinuousAxisRange, ContinuousNumericAxis>()
+    } = useChart<Datum, SeriesStyle, unknown, ContinuousAxisRange, ContinuousNumericAxis>()
 
     const {
         xAxesState,
@@ -72,8 +116,9 @@ export function ContinuousAxis(props: Props): null {
         addYAxis,
         axisRangeFor,
         setAxisIntervalFor,
-        setAxisRangeFor,
+        updateAxisRanges,
         addAxesRangesUpdateHandler,
+        removeAxesRangesUpdateHandler,
     } = axes
 
     const {
@@ -88,14 +133,36 @@ export function ContinuousAxis(props: Props): null {
         domain,
         updateAxisBasedOnDomainValues = true,
         label,
+        autoScale = false,
+        autoScaleMin = -Infinity,
+        autoScaleMax = Infinity,
+        autoScalePadding = 0.05,
+        autoScaledDomain,
+        onAutoScale,
     } = props
 
+    // the latest callback for the auto-scaling axis' domain changes (the range-update handler that
+    // reports them is registered once, when the axis is created)
+    const onAutoScaleRef = useRef(onAutoScale)
+    useEffect(
+        () => {
+            onAutoScaleRef.current = onAutoScale
+        },
+        [onAutoScale]
+    )
+
     const axisRef = useRef<ContinuousNumericAxis>(undefined)
     const rangeUpdateHandlerIdRef = useRef<string>(undefined)
+    // the axisId this axis was actually created under, so the main effect below can tell "axisId
+    // changed since I last ran" apart from "first run" -- see its use for why this matters
+    const createdAxisIdRef = useRef<string | undefined>(undefined)
 
     const axisIdRef = useRef<string>(axisId)
     const marginRef = useRef<Margin>(margin)
+    // holds on the domain from the original props so that we can determine whether the props changed
+    // or whether the axis changes from resizing, zoom, scrolling, etc
     const domainRef = useRef<AxisInterval>(AxisInterval.as(domain))
+    const domainPropRef = useRef<[min: number, max: number]>(domain)
     useEffect(
         () => {
             axisIdRef.current = axisId
@@ -106,31 +173,73 @@ export function ContinuousAxis(props: Props): null {
 
     useEffect(
         () => {
-            if (container) {
-                const svg = d3.select<SVGSVGElement, any>(container)
+            if (canvasContext) {
+                // a changed axisId prop means axisRef.current (and its range-update handler) were
+                // created under the OLD id -- the separate unmount-cleanup effect below (also keyed
+                // on axisId) already unregistered the OLD id's canvas draw handle by the time this
+                // runs (React fires that cleanup, closing over the previous axisId, before this
+                // effect re-runs). Without resetting axisRef.current here too, the `else` branch
+                // below would run instead of re-creating the axis, silently leaving it undrawn
+                // under the new id forever -- this mount-once guard otherwise never resets on its
+                // own.
+                if (createdAxisIdRef.current !== undefined && createdAxisIdRef.current !== axisId) {
+                    if (rangeUpdateHandlerIdRef.current) {
+                        removeAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current)
+                        rangeUpdateHandlerIdRef.current = undefined
+                    }
+                    axisRef.current = undefined
+                }
+
                 const font: AxesFont = {...defaultAxesFont(), color, ...props.font}
 
+                // the auto-scaling settings, which the plot applies (y-axes only: an x-axis' domain
+                // follows time, and its zooming and panning)
+                const isYAxis = location === AxisLocation.Left || location === AxisLocation.Right
+                if (autoScale && !isYAxis) {
+                    warnOnce(`Auto-scaling is for y-axes only, so the "autoScale" setting of x-axis "${axisId}" is ignored`)
+                }
+                const propDomain = AxisInterval.as(domain).asTuple()
+                const settings: AutoScale | undefined = autoScale && isYAxis ?
+                    {
+                        domain: clampedDomain(propDomain, autoScaleMin, autoScaleMax),
+                        min: autoScaleMin,
+                        max: autoScaleMax,
+                        padding: autoScalePadding
+                    } :
+                    undefined
+                if (settings !== undefined && settings.domain[0] === settings.domain[1] && propDomain[0] !== propDomain[1]) {
+                    warnOnce(`The domain of y-axis "${axisId}" lies outside its auto-scaling limits, so it collapses onto a limit`)
+                }
+
+                // the settings the axis had (none, when it's about to be created)
+                const previous = axisRef.current?.autoScale
+
                 const handleRangeUpdates = (updates: Map<string, ContinuousAxisRange>, plotDim: Dimensions): void => {
                     if (rangeUpdateHandlerIdRef.current && axisRef.current) {
                         const range = updates.get(axisId)
                         if (range) {
                             axisRef.current.update(range.current, plotDim, marginRef.current)
+                            // an auto-scaling axis' domain changes (growth, or a restore) come
+                            // through here, so report them
+                            if (axisRef.current.autoScale !== undefined) {
+                                onAutoScaleRef.current?.(range.current.asTuple())
+                            }
                         }
                     }
                 }
 
                 if (axisRef.current === undefined) {
+                    createdAxisIdRef.current = axisId
                     switch (location) {
                         case AxisLocation.Bottom:
                         case AxisLocation.Top: {
                             axisRef.current = addContinuousNumericXAxis(
-                                chartId, axisId, svg, plotDimensions, location, scale, domain,
+                                canvasContext, axisId, plotDimensions, location, scale, domain,
                                 font, margin, label, setAxisIntervalFor
                             )
                             // add the x-axis to the chart context
                             const [start, end] = AxisInterval.as(domain).asTuple()
                             addXAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
-                            // addXAxis(axisRef.current, axisId, AxisInterval.as(domain))
 
                             // add an update handler
                             rangeUpdateHandlerIdRef.current = `x-axis-${chartId}-${axisId}-${location.valueOf()}`
@@ -142,13 +251,12 @@ export function ContinuousAxis(props: Props): null {
                         case AxisLocation.Left:
                         case AxisLocation.Right: {
                             axisRef.current = addContinuousNumericYAxis(
-                                chartId, axisId, svg, plotDimensions, location, scale, domain,
+                                canvasContext, axisId, plotDimensions, location, scale, domain,
                                 font, margin, label, setAxisIntervalFor
                             )
                             // add the y-axis to the chart context
                             const [start, end] = AxisInterval.as(domain).asTuple()
                             addYAxis(axisRef.current, axisId, ContinuousAxisRange.from(start, end))
-                            // addYAxis(axisRef.current, axisId, AxisInterval.as(domain))
 
                             // add an update handler
                             rangeUpdateHandlerIdRef.current = `y-axis-${chartId}-${axisId}-${location.valueOf()}`
@@ -156,36 +264,124 @@ export function ContinuousAxis(props: Props): null {
                         }
                     }
                 } else {
-                    const axisRange = axisRangeFor(axisId)
-                    const domain = axisRange
+                    // apply the new auto-scaling settings before any domain update below, so that,
+                    // for example, a `domain` change that comes with turning auto-scaling off isn't
+                    // reported (through `onAutoScale`) as an auto-scaled domain
+                    axisRef.current.autoScale = settings
+
+                    // calculate the current domain for the axis based on the current interval (range)
+                    const currentDomain = axisRangeFor(axisId)
                         .map(range => range.current)
                         .getOrElse(AxisInterval.empty())
-                    if (domain.isNotEmpty()) {
-                        axisRef.current.update(domain, plotDimensions, margin)
-                    }
 
+                    // convert the domain from the props to an axis interval for easier comparison
+                    const propDomain = AxisInterval.as(domain)
+
+                    // select whether to update based on whether we have specified that we update the axis
+                    // range when the domain from the props changes. If the conditions of the first if
+                    // statement are met, then we do a full update of the axis (we update the current, original
+                    // range and make the callback that the range has changed with the updated range map)
                     if (
-                        (updateAxisBasedOnDomainValues && (domainRef.current.start !== domain.start || domainRef.current.end !== domain.end)) ||
-                        (!updateAxisBasedOnDomainValues && domainRef.current !== domain)
+                        // update axis when the domain from the props has changed
+                        (updateAxisBasedOnDomainValues && !domainRef.current.equals(propDomain)) ||
+                        // or when the axis range has actually changed, but we don't update from props
+                        (!updateAxisBasedOnDomainValues && domainPropRef.current !== domain)
                     ) {
-                        domainRef.current = domain
-                        axisRange.ifPresent(range => setAxisRangeFor(axisId, range.updateOriginal(domain.start, domain.end)))
-
+                        domainRef.current = propDomain
+                        domainPropRef.current = domain
+                        // preserve any existing `.original` tracking (e.g. from an in-progress
+                        // zoom) rather than collapsing it to match this new current. A domain-prop
+                        // change here reflects the chart's OWN state being round-tripped back in
+                        // (e.g. a zoom/auto-scroll notifying `onUpdateAxesBounds`, which a caller
+                        // wrote into a store that feeds this same `domain` prop) at least as often
+                        // as it reflects a genuine external reset -- and there's no way to tell
+                        // those apart from here. Zoom math is now incremental (see
+                        // `ContinuousAxisRange.scaledRange`), so preserving `.original` isn't
+                        // required for zoom correctness anymore, but it's still the more accurate
+                        // value to carry forward on an ordinary round-trip. A genuine external reset
+                        // (e.g. the Reset button) already restores the whole axis explicitly
+                        // elsewhere, so this doesn't need to special-case it too.
+                        const updatedRange = axisRangeFor(axisId)
+                            .map(range => range.update(propDomain.start, propDomain.end) as ContinuousAxisRange)
+                            .getOrElse(ContinuousAxisRange.from(propDomain.start, propDomain.end))
+                        updateAxisRanges(new Map([[axisId, updatedRange]]))
+                    }
+                    // otherwise, if the domain exists, update the current axis
+                    else if (currentDomain.isNotEmpty()) {
+                        axisRef.current.update(currentDomain, plotDimensions, margin)
                     }
 
-                    svg.select(`#${labelIdFor(chartId, location)}`).attr('fill', color)
+                    // keep the label/tick color in sync with the chart's color (e.g. on theme change),
+                    // without recreating the axis or touching its domain
+                    axisRef.current.updateFont(font)
+                }
+
+                // when the settings change, the axis (re)starts: from the kept auto-scaled domain
+                // (if any) when auto-scaling starts, otherwise from its start; and from its own
+                // domain when auto-scaling stops
+                axisRef.current.autoScale = settings
+                if (!sameAutoScale(previous, settings)) {
+                    const [start, end] = settings === undefined ?
+                        propDomain :
+                        previous === undefined && autoScaledDomain !== undefined ?
+                            clampedDomain(AxisInterval.as(autoScaledDomain).asTuple(), settings.min, settings.max) :
+                            settings.domain
+                    updateAxisRanges(new Map([[axisId, axisRangeFor(axisId)
+                        .map(range => range.update(start, end) as ContinuousAxisRange)
+                        .getOrElse(ContinuousAxisRange.from(start, end))
+                    ]]))
                 }
             }
         },
         [
             chartId, axisId, label, location, props.font, xAxesState, yAxesState, addXAxis, addYAxis, domain,
-            scale, container, margin, plotDimensions, setAxisIntervalFor,
+            scale, canvasContext, margin, plotDimensions, setAxisIntervalFor,
             axisRangeFor,
             addAxesRangesUpdateHandler,
-            setAxisRangeFor,
-            color, updateAxisBasedOnDomainValues
+            removeAxesRangesUpdateHandler,
+            updateAxisRanges,
+            color, updateAxisBasedOnDomainValues,
+            autoScale, autoScaleMin, autoScaleMax, autoScalePadding, autoScaledDomain
         ]
     )
 
+    // unregister the axes-provider range-update handler on a genuine unmount -- the main effect
+    // above only removes it on an axisId *change* (line ~130), never on unmount itself, so
+    // without this a component that unmounts and later remounts with the same chartId/axisId/
+    // location (hence the same computed handlerId) would try to re-register under an ID that's
+    // still occupied and throw ("Handler with ID already exists..."). Mirrors OrdinalAxis.tsx's
+    // identical cleanup effect.
+    useEffect(
+        () => {
+            return () => {
+                if (rangeUpdateHandlerIdRef.current) {
+                    removeAxesRangesUpdateHandler(rangeUpdateHandlerIdRef.current)
+                }
+            }
+        },
+        [removeAxesRangesUpdateHandler]
+    )
+
+    // unregister the axis' draw function when the axis unmounts (e.g. the chart is torn down, or
+    // this axis is swapped out for a different one)
+    useEffect(
+        () => {
+            return () => {
+                if (canvasContext) {
+                    switch (location) {
+                        case AxisLocation.Bottom:
+                        case AxisLocation.Top:
+                            removeContinuousXAxis(canvasContext, axisId)
+                            break
+                        case AxisLocation.Left:
+                        case AxisLocation.Right:
+                            removeContinuousYAxis(canvasContext, axisId)
+                    }
+                }
+            }
+        },
+        [canvasContext, axisId, location]
+    )
+
     return null
 }

package/src/app/charts/axes/ContinuousAxisRange.ts

@@ -6,6 +6,13 @@ import {BaseAxisRange} from "./BaseAxisRange";
  */
 export class ContinuousAxisRange extends BaseAxisRange {
 
+    /**
+     * Use {@link ContinuousAxisRange.from} to create an instance
+     * @param start The start of the axis-range
+     * @param end The end of the axis-range
+     * @param [originalStart=start] The original start of the axis-range
+     * @param [originalEnd=end] The original end of the axis-range
+     */
     private constructor(start: number, end: number, originalStart: number = start, originalEnd: number = end) {
         super(start, end, originalStart, originalEnd)
     }
@@ -25,10 +32,11 @@ export class ContinuousAxisRange extends BaseAxisRange {
     }
 
     /**
-     * Scales the axis-range by the specified scale factor from the specified value. The equations
-     * are written so that the zooming (scaling) occurs at the specified value and expands/contracts equally
-     * from that value.
-     * @param factor The scale factor
+     * Scales the axis-range by the specified *incremental* scale factor (relative to `.current`,
+     * not `.original` -- see {@link BaseAxisRange.scaledRange}) from the specified value. The
+     * equations are written so that the zooming (scaling) occurs at the specified value and
+     * expands/contracts equally from that value.
+     * @param factor The incremental scale factor
      * @param value The value from which to scale the interval
      * @return A new continuous-axis range with updated values
      */
@@ -38,10 +46,18 @@ export class ContinuousAxisRange extends BaseAxisRange {
     }
 
     /**
-     * Scales the axis-range by the specified scale factor from the specified value, while keeping
-     * the range within the constraints (start, end). The equations are written so that the zooming
-     * (scaling) occurs at the specified value, and expands/contracts equally from that value.
-     * @param factor The scale factor
+     * Scales the axis-range by the specified *incremental* scale factor (relative to `.current`,
+     * not `.original` -- see {@link BaseAxisRange.scaledRange}) from the specified value, while
+     * keeping the range within the constraints (start, end). The equations are written so that the
+     * zooming (scaling) occurs at the specified value, and expands/contracts equally from that value.
+     *
+     * Clamps the scaled result to stay *inside* `constraint` (shrinks toward it, never past it) --
+     * `constraint` is a hard viewport edge (e.g. the data domain) that the visible range must not
+     * scroll or zoom beyond. This is the opposite direction from
+     * {@link OrdinalAxisRange.constrainedScale}, which *widens* its result to guarantee coverage
+     * of `constraint` instead -- see that method's doc comment for why an ordinal axis needs the
+     * opposite behavior. Do not "fix" this difference without reading both.
+     * @param factor The incremental scale factor
      * @param value The value from which to scale the interval
      * @param constraint The minimum and maximum values that range bounds can be
      * @return A new continuous-axis range with updated values
@@ -58,14 +74,16 @@ export class ContinuousAxisRange extends BaseAxisRange {
     }
 
     /**
-     * Translates the axis-range by the specified amount
+     * Translates the axis-range by the specified amount, unless that would take it outside the
+     * constraint interval (when both ends of the constraint are infinite, there's no constraint)
      * @param amount The amount by which to translate the axis-range
      * @param [constraint=[-Infinity, Infinity]] Optional constraint interval in which the axis range must be within
-     * @return An updated {@link ContinuousAxisRange} that has been translated by the specified amount
+     * @return An updated {@link ContinuousAxisRange} that has been translated by the specified amount (or an
+     * unchanged copy, when the translation would leave the constraint interval)
      */
     translate(amount: number, constraint: [start: number, end: number] = [-Infinity, Infinity]): ContinuousAxisRange {
         const [cs, ce] = constraint
-        // when either of the constraints is infinite, or the pan keeps the new axis range
+        // when both of the constraints are infinite, or the pan keeps the new axis range
         // within the origin axis range (i.e. zoomed in and the panned), then allow the pan,
         // otherwise don't update
         if ((!isFinite(cs) && !isFinite(ce)) || (this.current.start + amount >= cs && this.current.end + amount <= ce)) {

package/src/app/charts/axes/EmptyAxis.tsx

@@ -1,10 +1,19 @@
-import {addEmptyXAxis, addEmptyYAxis, AxisLocation, ContinuousNumericAxis,} from "./axes";
-import {useChart} from "../hooks/useChart";
+import {
+    AxisLocation,
+    addEmptyXAxis,
+    addEmptyYAxis,
+    defaultAxesFont,
+    removeContinuousXAxis,
+    removeContinuousYAxis,
+    type ContinuousNumericAxis,
+    type SeriesStyle
+} from "./axes";
+import {type NoTooltipMetadata, useChart} from "../hooks/useChart";
 import {useEffect, useRef} from "react";
 import * as d3 from "d3";
-import {Margin} from "../styling/margins";
+import type {Margin} from "../styling/margins";
 import {usePlotDimensions} from "../hooks/usePlotDimensions";
-import {Datum} from "../series/timeSeries";
+import type {Datum} from "../series/timeSeries";
 import {AxisInterval} from "./AxisInterval";
 import {ContinuousAxisRange} from "./ContinuousAxisRange";
 
@@ -23,17 +32,20 @@ const EMPTY_AXIS_SCALE = d3.scaleLinear()
 const EMPTY_AXIS_DOMAIN: [min: number, max: number] = [0, 1]
 
 /**
- * Represents an empty axis (x or y) that can be place on the top, bottom,
+ * Represents an empty axis (x or y) that can be placed on the top, bottom,
  * left, or right of the chart. An empty axis is just a line where the axis
- * would be, without any ticks or labels.
+ * would be, without any ticks or labels. This component returns null, meaning React won't
+ * render it because we are drawing directly onto the chart's shared canvas.
  * @param props The properties for the axis
+ * @return `null` (the axis draws onto the chart's canvas)
  */
 export function EmptyAxis(props: Props): null {
     const {
         chartId,
-        container,
+        canvasContext,
         axes,
-    } = useChart<Datum, any, any, ContinuousAxisRange, ContinuousNumericAxis>()
+        color,
+    } = useChart<Datum, SeriesStyle, NoTooltipMetadata, ContinuousAxisRange, ContinuousNumericAxis>()
 
     const {
         addXAxis,
@@ -67,16 +79,14 @@ export function EmptyAxis(props: Props): null {
 
     useEffect(
         () => {
-            if (container) {
-                const svg = d3.select<SVGSVGElement, any>(container)
-
+            if (canvasContext) {
                 if (axisRef.current === undefined) {
                     switch (location) {
                         case AxisLocation.Bottom:
                         case AxisLocation.Top: {
                             axisRef.current = addEmptyXAxis(
-                                axisId, svg, plotDimensions, location, EMPTY_AXIS_SCALE,
-                                margin, setAxisIntervalFor, EMPTY_AXIS_DOMAIN
+                                canvasContext, axisId, plotDimensions, location, EMPTY_AXIS_SCALE,
+                                margin, setAxisIntervalFor, color, EMPTY_AXIS_DOMAIN
                             )
                             // add the x-axis to the chart context
                             const [start, end] = AxisInterval.as(EMPTY_AXIS_DOMAIN).asTuple()
@@ -88,8 +98,8 @@ export function EmptyAxis(props: Props): null {
                         case AxisLocation.Left:
                         case AxisLocation.Right: {
                             axisRef.current = addEmptyYAxis(
-                                axisId, svg, plotDimensions, location, EMPTY_AXIS_SCALE,
-                                margin, setAxisIntervalFor, EMPTY_AXIS_DOMAIN
+                                canvasContext, axisId, plotDimensions, location, EMPTY_AXIS_SCALE,
+                                margin, setAxisIntervalFor, color, EMPTY_AXIS_DOMAIN
                             )
                             // add the y-axis to the chart context
                             const [start, end] = AxisInterval.as(EMPTY_AXIS_DOMAIN).asTuple()
@@ -104,16 +114,41 @@ export function EmptyAxis(props: Props): null {
                     if (domain.isNotEmpty()) {
                         axisRef.current.update(domain, plotDimensions, margin)
                     }
+
+                    // keep the line color in sync with the chart's color (e.g. on theme change),
+                    // without recreating the axis or touching its domain
+                    axisRef.current.updateFont({...defaultAxesFont(), color})
                 }
             }
         },
         [
             chartId, axisId, location, addXAxis, addYAxis,
-            container, margin, plotDimensions, setAxisIntervalFor,
+            canvasContext, margin, plotDimensions, setAxisIntervalFor,
             axisRangeFor,
             setAxisRangeFor,
+            color,
         ]
     )
 
+    // unregister the axis' draw function when the axis unmounts
+    useEffect(
+        () => {
+            return () => {
+                if (canvasContext) {
+                    switch (location) {
+                        case AxisLocation.Bottom:
+                        case AxisLocation.Top:
+                            removeContinuousXAxis(canvasContext, axisId)
+                            break
+                        case AxisLocation.Left:
+                        case AxisLocation.Right:
+                            removeContinuousYAxis(canvasContext, axisId)
+                    }
+                }
+            }
+        },
+        [canvasContext, axisId, location]
+    )
+
     return null
-}
+}