@perspective-dev/viewer-charts 5.2.0 → 5.3.1

package/src/ts/charts/cartesian/cartesian-render.ts

@@ -31,6 +31,11 @@ import {
 } from "../../webgl/plot-frame";
 import { ensureGradientTexture } from "../../webgl/gradient-texture";
 import { renderCanvasTooltip } from "../../interaction/tooltip-controller";
+import { tooltipStyleOf } from "../../interaction/tooltip-grid";
+import {
+    renderAxisHoverIndicators,
+    type AxisIndicator,
+} from "../../interaction/axis-indicators";
 import {
     computeTicks,
     renderGridlines,
@@ -41,6 +46,9 @@ import {
     type AxisDomain,
 } from "../../axis/numeric-axis";
 import { initCanvas, getScaledContext } from "../../axis/canvas";
+import { computeMapDegreeTicks } from "../../axis/map-ticks";
+import { mercatorToLonLat } from "../../map/mercator";
+import { stepTickFormatter } from "../../layout/ticks";
 import {
     type CategoricalDomain,
     type CategoricalLevel,
@@ -54,7 +62,16 @@ import {
     renderLegendAt,
     renderCategoricalLegend,
     renderCategoricalLegendAt,
+    legendAutoFit,
+    gradientLegendAutoFit,
+    type LegendPaintView,
 } from "../../axis/legend";
+import {
+    legendRightGutter,
+    legendSidebarWidth,
+    resolveLegendMode,
+    type LegendAutoFit,
+} from "../../interaction/legend-controller";
 
 /**
  * NaN guard: `_xOrigin`/`_yOrigin` start as NaN before the first valid sample.
@@ -63,6 +80,43 @@ function rebaseOrigin(o: number): number {
     return isNaN(o) ? 0 : o;
 }
 
+/**
+ * Legend entry count for `legend_mode: "auto"` resolution: the
+ * categorical swatch count when a string color column is wired, `0`
+ * for continuous gradient legends (no entry list — always compact).
+ */
+function legendEntryCount(chart: CartesianChart): number {
+    return chart._colorIsString ? chart._uniqueColorLabels.size : 0;
+}
+
+/**
+ * Content measurements for a `legend_size_mode: "auto"` floating panel.
+ * Categorical legends hug their label list; gradient legends have no
+ * rows and hug their tick labels instead.
+ */
+function legendFit(chart: CartesianChart, theme: Theme): LegendAutoFit {
+    const title = chart._colorName ?? undefined;
+    if (chart._colorIsString) {
+        return legendAutoFit(
+            chart._chromeCanvas,
+            theme,
+            chart._uniqueColorLabels.size,
+            () => chart._uniqueColorLabels.keys(),
+            { title },
+        );
+    }
+
+    return gradientLegendAutoFit(
+        chart._chromeCanvas,
+        theme,
+        { min: chart._colorMin, max: chart._colorMax },
+        chart._colorName
+            ? chart.getColumnFormatter(chart._colorName, "value")
+            : undefined,
+        title,
+    );
+}
+
 /**
  * Full-frame render: gridlines → glyph draw inside the plot-frame
  * scissor → chrome overlay (axes + legend + tooltip).
@@ -368,7 +422,12 @@ function renderSinglePlotFrame(
 
     // One-pass plot-width / plot-height estimate to size the
     // categorical gutter overrides; same approach as series-render.
-    const estRight = hasColorCol ? 80 : 16;
+    const estRight = legendRightGutter(
+        chart._pluginConfig,
+        hasColorCol,
+        80,
+        legendEntryCount(chart),
+    );
     const estLeftPlain = 55 + (chart._yLabel ? 16 : 0);
     const estPlotWidth = Math.max(1, cssWidth - estLeftPlain - estRight);
     const leftExtra = chart._yCategoryDomain
@@ -378,13 +437,36 @@ function renderSinglePlotFrame(
         ? measureCategoricalAxisHeight(chart._xCategoryDomain, estPlotWidth)
         : undefined;
 
-    const layout = new PlotLayout(cssWidth, cssHeight, {
-        hasXLabel: !!chart._xLabel,
-        hasYLabel: !!chart._yLabel,
-        hasLegend: hasColorCol,
-        leftExtra,
-        bottomExtra,
-    });
+    const isMap = chart._renderMode === "map";
+    const bareMap = isMap && !chart._pluginConfig.numeric_axes;
+    const layout = new PlotLayout(
+        cssWidth,
+        cssHeight,
+        bareMap
+            ? {
+                  hasXLabel: false,
+                  hasYLabel: false,
+                  hasLegend: hasColorCol,
+                  leftExtra: 0,
+                  bottomExtra: 0,
+                  rightExtra:
+                      hasColorCol &&
+                      resolveLegendMode(
+                          chart._pluginConfig,
+                          legendEntryCount(chart),
+                      ) === "sidebar"
+                          ? legendSidebarWidth(chart._pluginConfig, 80)
+                          : 0,
+              }
+            : {
+                  hasXLabel: !!chart._xLabel,
+                  hasYLabel: !!chart._yLabel,
+                  hasLegend: hasColorCol,
+                  leftExtra,
+                  bottomExtra,
+                  rightExtra: estRight,
+              },
+    );
     chart._lastLayout = layout;
     if (chart._zoomController) {
         chart._zoomController.updateLayout(layout);
@@ -408,8 +490,6 @@ function renderSinglePlotFrame(
     const xTicks = chart._xIsString ? [] : numericTicks.xTicks;
     const yTicks = chart._yIsString ? [] : numericTicks.yTicks;
 
-    const isMap = chart._renderMode === "map";
-
     // Defer the gridline draw past the GPU fence (see `_defer2D`) so the
     // gridline canvas doesn't present ahead of the GL glyphs on resize.
     // The closure captures this frame's `layout` / ticks / `theme`.
@@ -516,14 +596,28 @@ function renderFacetedFrame(
     // charts always have both axes, so the false branch maps to
     // per-cell mode (never to "none", which is reserved for tree
     // charts).
+    const isMap = chart._renderMode === "map";
+    const bareMap = isMap && !chart._pluginConfig.numeric_axes;
     const grid: FacetGrid = buildFacetGrid(labels, {
         cssWidth,
         cssHeight,
-        xAxis: chart._lastEffectiveSharedX ? "outer" : "cell",
-        yAxis: chart._lastEffectiveSharedY ? "outer" : "cell",
-        hasLegend,
-        hasXLabel: !!chart._xLabel,
-        hasYLabel: !!chart._yLabel,
+        xAxis: bareMap
+            ? "none"
+            : chart._lastEffectiveSharedX
+              ? "outer"
+              : "cell",
+        yAxis: bareMap
+            ? "none"
+            : chart._lastEffectiveSharedY
+              ? "outer"
+              : "cell",
+        hasLegend:
+            hasLegend &&
+            resolveLegendMode(chart._pluginConfig, legendEntryCount(chart)) ===
+                "sidebar",
+        legendWidth: legendSidebarWidth(chart._pluginConfig, 96),
+        hasXLabel: !bareMap && !!chart._xLabel,
+        hasYLabel: !bareMap && !!chart._yLabel,
         gap: chart._facetConfig.facet_padding,
     });
     chart._facetGrid = grid;
@@ -618,7 +712,6 @@ function renderFacetedFrame(
         // own domain). Map mode skips gridlines entirely; the
         // basemap layer is rendered into the GL canvas inside the
         // facet's scissor below.
-        const isMap = chart._renderMode === "map";
         if (gridlineCanvas && !isMap) {
             // Deferred to the post-fence 2D flush. The closure captures
             // this facet's `cell` (whose `cell.layout` already carries
@@ -699,6 +792,11 @@ function renderFacetedFrame(
  * Redraw the chrome canvas only. Used for lightweight hover updates.
  */
 export function renderCartesianChromeOverlay(chart: CartesianChart): void {
+    paintCartesianChromeOverlay(chart);
+    chart.presentOverlay();
+}
+
+function paintCartesianChromeOverlay(chart: CartesianChart): void {
     if (
         !chart._chromeCanvas ||
         !chart._lastLayout ||
@@ -728,6 +826,30 @@ function renderSinglePlotChromeOverlay(chart: CartesianChart): void {
     const isMap = chart._renderMode === "map";
 
     if (isMap) {
+        if (chart._pluginConfig.numeric_axes) {
+            const mt = computeMapDegreeTicks(layout);
+            renderCellXAxis(
+                chart._chromeCanvas!,
+                chart._lastXDomain!,
+                layout,
+                mt.xTicks,
+                theme,
+                !!chart._xLabel,
+                dpr,
+                mt.formatX,
+            );
+            renderCellYAxis(
+                chart._chromeCanvas!,
+                chart._lastYDomain!,
+                layout,
+                mt.yTicks,
+                theme,
+                !!chart._yLabel,
+                dpr,
+                mt.formatY,
+            );
+        }
+
         chart.renderMapChrome(chart._chromeCanvas!, layout, theme, dpr);
     } else {
         renderCartesianCellAxes(
@@ -743,37 +865,95 @@ function renderSinglePlotChromeOverlay(chart: CartesianChart): void {
         );
     }
 
-    if (chart._lastHasColorCol) {
+    const legendMode = resolveLegendMode(
+        chart._pluginConfig,
+        legendEntryCount(chart),
+    );
+    let legendPainted = false;
+    if (chart._lastHasColorCol && legendMode !== "none") {
         const stops = chart._lastGradientStops ?? theme.gradientStops;
+        const floating = legendMode === "floating";
+        const view: LegendPaintView = {
+            mode: floating ? "floating" : "sidebar",
+            legend: chart._legend,
+            title: chart._colorName ?? undefined,
+            opacity: chart._pluginConfig.legend_opacity,
+        };
+        const floatBox = floating
+            ? chart._legend.floatingBox(
+                  chart._pluginConfig,
+                  layout.cssWidth,
+                  layout.cssHeight,
+                  legendFit(chart, theme),
+              )
+            : null;
         if (chart._colorIsString && chart._uniqueColorLabels.size > 0) {
             const palette = resolvePalette(
                 theme.seriesPalette,
                 stops,
                 chart._uniqueColorLabels.size,
             );
-            renderCategoricalLegend(
-                chart._chromeCanvas!,
-                layout,
-                chart._uniqueColorLabels,
-                palette,
-                theme,
-            );
+            if (floatBox) {
+                renderCategoricalLegendAt(
+                    chart._chromeCanvas!,
+                    floatBox,
+                    chart._uniqueColorLabels,
+                    palette,
+                    theme,
+                    view,
+                );
+            } else {
+                renderCategoricalLegend(
+                    chart._chromeCanvas!,
+                    layout,
+                    chart._uniqueColorLabels,
+                    palette,
+                    theme,
+                    view,
+                );
+            }
+
+            legendPainted = true;
         } else if (chart._colorName) {
-            renderLegend(
-                chart._chromeCanvas!,
-                layout,
-                {
-                    min: chart._colorMin,
-                    max: chart._colorMax,
-                    label: chart._colorName,
-                },
-                stops,
-                theme,
-                chart.getColumnFormatter(chart._colorName, "value"),
+            const colorDomain = {
+                min: chart._colorMin,
+                max: chart._colorMax,
+                label: chart._colorName,
+            };
+            const formatter = chart.getColumnFormatter(
+                chart._colorName,
+                "value",
             );
+            if (floatBox) {
+                renderLegendAt(
+                    chart._chromeCanvas!,
+                    floatBox,
+                    colorDomain,
+                    stops,
+                    theme,
+                    formatter,
+                    view,
+                );
+            } else {
+                renderLegend(
+                    chart._chromeCanvas!,
+                    layout,
+                    colorDomain,
+                    stops,
+                    theme,
+                    formatter,
+                    view,
+                );
+            }
+
+            legendPainted = true;
         }
     }
 
+    if (!legendPainted) {
+        chart._legend.clearPainted();
+    }
+
     renderScatterLabels(chart, chart._chromeCanvas!, layout, 0, 1);
 
     if (chart._hoveredIndex >= 0 && chart._xData && chart._yData) {
@@ -811,35 +991,44 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
     // (one pass per leftmost-column cell). Map mode replaces both
     // with `renderMapChrome` (attribution + scale bar), painted once
     // over the whole facet grid.
+    const mapAxes = isMap && chart._pluginConfig.numeric_axes;
+    const sharedMapTicks =
+        mapAxes && grid.cells.length > 0
+            ? computeMapDegreeTicks(grid.cells[0].layout)
+            : null;
     if (isMap) {
         chart.renderMapChrome(canvas, chart._lastLayout!, theme, dpr);
     }
 
-    if (!isMap && sharedX && grid.outerXAxisRect) {
+    if ((!isMap || sharedMapTicks) && sharedX && grid.outerXAxisRect) {
         renderOuterXAxis(
             canvas,
             grid.outerXAxisRect,
             xDomain,
-            sharedXTicks,
+            sharedMapTicks ? sharedMapTicks.xTicks : sharedXTicks,
             bottomRowLayouts(grid),
             theme,
             !!chart._xLabel,
             dpr,
-            chart.getColumnFormatter(chart._xName, "tick"),
+            sharedMapTicks
+                ? sharedMapTicks.formatX
+                : chart.getColumnFormatter(chart._xName, "tick"),
         );
     }
 
-    if (!isMap && sharedY && grid.outerYAxisRect) {
+    if ((!isMap || sharedMapTicks) && sharedY && grid.outerYAxisRect) {
         renderOuterYAxis(
             canvas,
             grid.outerYAxisRect,
             yDomain,
-            sharedYTicks,
+            sharedMapTicks ? sharedMapTicks.yTicks : sharedYTicks,
             leftColumnLayouts(grid),
             theme,
             !!chart._yLabel,
             dpr,
-            chart.getColumnFormatter(chart._yName, "tick"),
+            sharedMapTicks
+                ? sharedMapTicks.formatY
+                : chart.getColumnFormatter(chart._yName, "tick"),
         );
     }
 
@@ -852,11 +1041,16 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
         const d = zc ? zc.getVisibleDomain() : null;
         const localX = d ? { ...xDomain, min: d.xMin, max: d.xMax } : xDomain;
         const localY = d ? { ...yDomain, min: d.yMin, max: d.yMax } : yDomain;
-        const ticks = independent
-            ? computeTicks(localX, localY, cell.layout)
-            : { xTicks: sharedXTicks, yTicks: sharedYTicks };
+        const cellMapTicks = mapAxes
+            ? computeMapDegreeTicks(cell.layout)
+            : null;
+        const ticks = cellMapTicks
+            ? cellMapTicks
+            : independent
+              ? computeTicks(localX, localY, cell.layout)
+              : { xTicks: sharedXTicks, yTicks: sharedYTicks };
 
-        if (!isMap && !sharedX) {
+        if ((!isMap || cellMapTicks) && !sharedX) {
             if (chart._xIsString && chart._xCategoryDomain) {
                 const cellCtx = getScaledContext(canvas, dpr);
                 if (cellCtx) {
@@ -876,12 +1070,14 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
                     theme,
                     !!chart._xLabel,
                     dpr,
-                    chart.getColumnFormatter(chart._xName, "tick"),
+                    cellMapTicks
+                        ? cellMapTicks.formatX
+                        : chart.getColumnFormatter(chart._xName, "tick"),
                 );
             }
         }
 
-        if (!isMap && !sharedY) {
+        if ((!isMap || cellMapTicks) && !sharedY) {
             if (chart._yIsString && chart._yCategoryDomain) {
                 const cellCtx = getScaledContext(canvas, dpr);
                 if (cellCtx) {
@@ -901,7 +1097,9 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
                     theme,
                     !!chart._yLabel,
                     dpr,
-                    chart.getColumnFormatter(chart._yName, "tick"),
+                    cellMapTicks
+                        ? cellMapTicks.formatY
+                        : chart.getColumnFormatter(chart._yName, "tick"),
                 );
             }
         }
@@ -914,10 +1112,29 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
     }
 
     // Shared legend: categorical (string color) or gradient
-    // (numeric color). Position derives from `grid.legendRect`
-    // which `buildFacetGrid` populates when `hasLegend` was set.
-    if (chart._lastHasColorCol && grid.legendRect) {
+    const legendMode = resolveLegendMode(
+        chart._pluginConfig,
+        legendEntryCount(chart),
+    );
+    const floating = legendMode === "floating";
+    const legendAnchor = floating
+        ? chart._legend.floatingBox(
+              chart._pluginConfig,
+              chart._lastLayout!.cssWidth,
+              chart._lastLayout!.cssHeight,
+              legendFit(chart, theme),
+          )
+        : grid.legendRect;
+    let legendPainted = false;
+    if (chart._lastHasColorCol && legendMode !== "none" && legendAnchor) {
         const stops = chart._lastGradientStops ?? theme.gradientStops;
+        const view: LegendPaintView = {
+            mode: floating ? "floating" : "sidebar",
+            legend: chart._legend,
+            title: chart._colorName ?? undefined,
+            sidebarGutter: floating ? undefined : grid.legendRect?.width,
+            opacity: chart._pluginConfig.legend_opacity,
+        };
         if (chart._colorIsString && chart._uniqueColorLabels.size > 0) {
             const palette = resolvePalette(
                 theme.seriesPalette,
@@ -926,23 +1143,27 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
             );
             renderCategoricalLegendAt(
                 canvas,
-                grid.legendRect,
+                legendAnchor,
                 chart._uniqueColorLabels,
                 palette,
                 theme,
+                view,
             );
+            legendPainted = true;
         } else if (chart._colorName) {
             // Numeric gradient legend in the shared outer rect. The
             // label sits above the bar, so inset the rect's top by
             // the usual 20 px that `renderLegend` reserves.
             renderLegendAt(
                 canvas,
-                {
-                    x: grid.legendRect.x,
-                    y: grid.legendRect.y + 20,
-                    width: grid.legendRect.width,
-                    height: grid.legendRect.height - 20,
-                },
+                floating
+                    ? legendAnchor
+                    : {
+                          x: legendAnchor.x,
+                          y: legendAnchor.y + 20,
+                          width: legendAnchor.width,
+                          height: legendAnchor.height - 20,
+                      },
                 {
                     min: chart._colorMin,
                     max: chart._colorMax,
@@ -951,10 +1172,16 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
                 stops,
                 theme,
                 chart.getColumnFormatter(chart._colorName, "value"),
+                view,
             );
+            legendPainted = true;
         }
     }
 
+    if (!legendPainted) {
+        chart._legend.clearPainted();
+    }
+
     // Coordinated hover / click indicators across facets. The tooltip
     // lines are whatever the last resolved lazy fetch produced (or
     // null while a fetch is still in flight); `renderCanvasTooltip`
@@ -970,7 +1197,9 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
         const dataY = chart._yData[chart._hoveredIndex] + yOrigin;
         const sourceFacet = seriesFromIndex(chart, chart._hoveredIndex);
         const opts = chart.glyph.tooltipOptions();
-        const tooltipLines = chart._lazyTooltip.lines ?? [];
+        const axisInd = axisIndicatorsEnabled(chart, opts);
+        const style = tooltipStyleOf(chart._pluginConfig);
+        const tooltipGrid = chart._lazyTooltip.grid ?? [];
 
         for (let i = 0; i < grid.cells.length; i++) {
             const cell = grid.cells[i];
@@ -989,10 +1218,28 @@ function renderFacetedChromeOverlay(chart: CartesianChart): void {
                 continue;
             }
 
+            if (isSource && axisInd) {
+                renderAxisHoverIndicators(
+                    canvas,
+                    cell.layout,
+                    theme,
+                    dpr,
+                    cartesianAxisIndicators(
+                        chart,
+                        cell.layout,
+                        pos,
+                        dataX,
+                        dataY,
+                    ),
+                    style.opacity,
+                );
+            }
+
             const coordinated = chart._facetConfig.coordinated_tooltip;
-            const lines = isSource || coordinated ? tooltipLines : [];
-            renderCanvasTooltip(canvas, pos, lines, cell.layout, theme, dpr, {
-                crosshair: opts.crosshair,
+            const content = isSource || coordinated ? tooltipGrid : [];
+            renderCanvasTooltip(canvas, pos, content, cell.layout, theme, dpr, {
+                ...style,
+                crosshair: opts.crosshair && (!isSource || !axisInd),
                 highlightRadius: isSource ? opts.highlightRadius : 0,
             });
         }
@@ -1117,24 +1364,76 @@ function renderTooltip(
 
     const xOrigin = isNaN(chart._xOrigin) ? 0 : chart._xOrigin;
     const yOrigin = isNaN(chart._yOrigin) ? 0 : chart._yOrigin;
-    const pos = layout.dataToPixel(
-        chart._xData[idx] + xOrigin,
-        chart._yData[idx] + yOrigin,
-    );
+    const dataX = chart._xData[idx] + xOrigin;
+    const dataY = chart._yData[idx] + yOrigin;
+    const pos = layout.dataToPixel(dataX, dataY);
 
     // Lines come from the async lazy tooltip fetch kicked off in
     // `handleCartesianHover`. While a fetch is in flight this is
     // `null`; the canvas tooltip helper still paints the crosshair /
     // highlight ring but skips the text box.
-    const lines = chart._lazyTooltip.lines ?? [];
+    const grid = chart._lazyTooltip.grid ?? [];
     const theme = chart._resolveTheme();
-    renderCanvasTooltip(
-        canvas,
-        pos,
-        lines,
-        layout,
-        theme,
-        chart._glManager?.dpr ?? 1,
-        chart.glyph.tooltipOptions(),
+    const dpr = chart._glManager?.dpr ?? 1;
+    const opts = chart.glyph.tooltipOptions();
+    const axisInd = axisIndicatorsEnabled(chart, opts);
+    if (axisInd) {
+        renderAxisHoverIndicators(
+            canvas,
+            layout,
+            theme,
+            dpr,
+            cartesianAxisIndicators(chart, layout, pos, dataX, dataY),
+            chart._pluginConfig.tooltip_opacity,
+        );
+    }
+
+    renderCanvasTooltip(canvas, pos, grid, layout, theme, dpr, {
+        ...tooltipStyleOf(chart._pluginConfig),
+        crosshair: opts.crosshair && !axisInd,
+        highlightRadius: opts.highlightRadius,
+    });
+}
+
+function axisIndicatorsEnabled(
+    chart: CartesianChart,
+    opts: { axisIndicators: boolean },
+): boolean {
+    return (
+        opts.axisIndicators &&
+        (chart._renderMode !== "map" || !!chart._pluginConfig.numeric_axes)
     );
 }
+
+function cartesianAxisIndicators(
+    chart: CartesianChart,
+    layout: PlotLayout,
+    pos: { px: number; py: number },
+    dataX: number,
+    dataY: number,
+): AxisIndicator[] {
+    let xText: string;
+    let yText: string;
+    const xOverride = chart.getColumnFormatter(chart._xName, "tick");
+    const yOverride = chart.getColumnFormatter(chart._yName, "tick");
+    if (chart._renderMode === "map") {
+        const mt = computeMapDegreeTicks(layout);
+        const [lon, lat] = mercatorToLonLat(dataX, dataY);
+        xText = xOverride ? xOverride(lon) : mt.formatX(dataX);
+        yText = yOverride ? yOverride(lat) : mt.formatY(dataY);
+    } else {
+        const xFmt =
+            xOverride ??
+            stepTickFormatter(chart._lastXDomain?.isDate, chart._lastXTicks);
+        const yFmt =
+            yOverride ??
+            stepTickFormatter(chart._lastYDomain?.isDate, chart._lastYTicks);
+        xText = xFmt(dataX);
+        yText = yFmt(dataY);
+    }
+
+    return [
+        { side: "bottom", px: pos.px, py: pos.py, text: xText },
+        { side: "left", px: pos.px, py: pos.py, text: yText },
+    ];
+}

package/src/ts/charts/cartesian/cartesian.ts

@@ -61,6 +61,19 @@ export class CartesianChart extends AbstractChart {
         this.glyph = glyph;
     }
 
+    protected override colorScaleColumn(): string | null {
+        return this._colorName || null;
+    }
+
+    /**
+     * Chrome-only repaint for legend scroll / floating-legend drag —
+     * the same lightweight path hover updates use. No GL pass; the
+     * composite re-presents over the retained plot bitmap.
+     */
+    repaintChrome(): void {
+        renderCartesianChromeOverlay(this);
+    }
+
     /**
      * Rendering pipeline selector. `"cartesian"` is the default —
      * draws axes, gridlines, and ticks via the chrome canvas.