matterviz 0.3.1 → 0.3.3

package/dist/plot/BarPlot.svelte

@@ -1,35 +1,227 @@
 <script
   lang="ts"
   generics="Metadata extends Record<string, unknown> = Record<string, unknown>"
->import { format_value } from '../labels';
-import { FullscreenToggle, set_fullscreen_bg } from '../layout';
-import { BarPlotControls, compute_element_placement, InteractiveAxisLabel, PlotLegend, ReferenceLine, ScatterPoint, } from './';
-import { AXIS_LABEL_CONTAINER, create_axis_change_handler, } from './axis-utils';
-import { process_prop } from './data-transform';
-import { create_dimension_tracker, create_hover_lock, } from './hover-lock.svelte';
-import { get_relative_coords, pan_range, PINCH_ZOOM_THRESHOLD, pixels_to_data_delta, } from './interactions';
-import { group_ref_lines_by_z, index_ref_lines } from './reference-line';
-import { create_color_scale, create_scale, create_size_scale, generate_ticks, get_nice_data_range, } from './scales';
-import { DEFAULT_GRID_STYLE, DEFAULT_MARKERS, get_scale_type_name, } from './types';
-import { DEFAULTS } from '../settings';
-import { extent } from 'd3-array';
-import { untrack } from 'svelte';
-import { Tween } from 'svelte/motion';
-import { SvelteMap } from 'svelte/reactivity';
-import { calc_auto_padding, constrain_tooltip_position, filter_padding, LABEL_GAP_DEFAULT, measure_text_width, } from './layout';
-import PlotTooltip from './PlotTooltip.svelte';
-import { bar_path } from './svg';
-let { series = $bindable([]), orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_axis = $bindable({}), y_axis = $bindable({}), y2_axis = $bindable({}), display = $bindable(DEFAULTS.bar.display), x_range = [null, null], y_range = [null, null], y2_range = [null, null], range_padding = 0.05, padding = { t: 20, b: 60, l: 60, r: 20 }, legend = {}, show_legend, bar = {}, line = {}, tooltip, user_content, hovered = $bindable(false), change = () => { }, on_bar_click, on_bar_hover, 
-// Line marker props (matching ScatterPlot)
-color_scale = {
-    type: `linear`,
-    scheme: `interpolateViridis`,
-    value_range: undefined,
-}, size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined }, point_tween, on_point_click, on_point_hover, ref_lines = $bindable([]), on_ref_line_click, on_ref_line_hover, show_controls = $bindable(true), controls_open = $bindable(false), controls_toggle_props, controls_pane_props, fullscreen = $bindable(false), fullscreen_toggle = true, children, header_controls, controls_extra, data_loader, on_axis_change, on_error, pan = {}, ...rest } = $props();
-// Initialize bar, line, y2_axis with defaults - using $derived for reactivity
-let bar_state = $derived({ ...DEFAULTS.bar.bar, ...bar });
-let line_state = $derived({ ...DEFAULTS.bar.line, ...line });
-y2_axis = {
+>
+  import type { D3ColorSchemeName, D3InterpolateName } from '../colors'
+  import { format_value } from '../labels'
+  import { sanitize_html } from '../sanitize'
+  import { FullscreenToggle, set_fullscreen_bg } from '../layout'
+  import type {
+    AxisLoadError,
+    BarHandlerProps,
+    BarMode,
+    BarSeries,
+    BarStyle,
+    BasePlotProps,
+    DataLoaderFn,
+    InitialRanges,
+    InternalPoint,
+    LegendConfig,
+    LegendItem,
+    LineStyle,
+    Orientation,
+    PanConfig,
+    PlotConfig,
+    RefLine,
+    RefLineEvent,
+    ScaleType,
+    TweenedOptions,
+    UserContentProps,
+    XyObj,
+  } from './'
+  import {
+    AxisLabel,
+    BarPlotControls,
+    compute_element_placement,
+    PlotLegend,
+    ReferenceLine,
+    ScatterPoint,
+  } from './'
+  import type { AxisChangeState } from './axis-utils'
+  import { create_axis_change_handler } from './axis-utils'
+  import { process_prop } from './data-transform'
+  import {
+    create_dimension_tracker,
+    create_hover_lock,
+  } from './hover-lock.svelte'
+  import {
+    get_relative_coords,
+    pan_range,
+    PINCH_ZOOM_THRESHOLD,
+    pixels_to_data_delta,
+  } from './interactions'
+  import type { IndexedRefLine } from './reference-line'
+  import { group_ref_lines_by_z, index_ref_lines } from './reference-line'
+  import {
+    create_color_scale,
+    create_scale,
+    create_size_scale,
+    generate_ticks,
+    get_nice_data_range,
+    get_tick_label,
+  } from './scales'
+  import {
+    DEFAULT_GRID_STYLE,
+    DEFAULT_MARKERS,
+    get_scale_type_name,
+  } from './types'
+  import { DEFAULTS } from '../settings'
+  import { extent } from 'd3-array'
+  import type { Snippet } from 'svelte'
+  import { untrack } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { Tween } from 'svelte/motion'
+  import { SvelteMap } from 'svelte/reactivity'
+  import type { Vec2 } from '../math'
+  import {
+    calc_auto_padding,
+    constrain_tooltip_position,
+    filter_padding,
+    LABEL_GAP_DEFAULT,
+    measure_max_tick_width,
+  } from './layout'
+  import PlotTooltip from './PlotTooltip.svelte'
+  import { bar_path } from './svg'
+  import ZeroLines from './ZeroLines.svelte'
+  import ZoomRect from './ZoomRect.svelte'
+
+  // Handler props for line marker events (extends BarHandlerProps with point-specific data)
+  interface LineMarkerHandlerProps extends BarHandlerProps<Metadata> {
+    point: InternalPoint<Metadata>
+  }
+
+  // Extended point type with computed screen coordinates (used internally for rendering)
+  type LineSeriesPoint = InternalPoint<Metadata> & {
+    x: number // Screen x coordinate
+    y: number // Screen y coordinate
+    data_x: number // Original data x value
+    data_y: number // Original data y value
+    idx: number // Index in series
+  }
+
+  let {
+    series = $bindable([]),
+    orientation = $bindable(`vertical`),
+    mode = $bindable(`overlay`),
+    x_axis = $bindable({}),
+    x2_axis = $bindable({}),
+    y_axis = $bindable({}),
+    y2_axis = $bindable({}),
+    display = $bindable(DEFAULTS.bar.display),
+    x_range = [null, null],
+    x2_range = [null, null],
+    y_range = [null, null],
+    y2_range = [null, null],
+    range_padding = 0.05,
+    padding = { t: 20, b: 60, l: 60, r: 20 },
+    legend = {},
+    show_legend,
+    bar = {},
+    line = {},
+    tooltip,
+    user_content,
+    hovered = $bindable(false),
+    change = () => {},
+    on_bar_click,
+    on_bar_hover,
+    // Line marker props (matching ScatterPlot)
+    color_scale = {
+      type: `linear`,
+      scheme: `interpolateViridis`,
+      value_range: undefined,
+    },
+    size_scale = { type: `linear`, radius_range: [2, 10], value_range: undefined },
+    point_tween,
+    on_point_click,
+    on_point_hover,
+    ref_lines = $bindable([]),
+    on_ref_line_click,
+    on_ref_line_hover,
+    show_controls = $bindable(true),
+    controls_open = $bindable(false),
+    controls_toggle_props,
+    controls_pane_props,
+    fullscreen = $bindable(false),
+    fullscreen_toggle = true,
+    children,
+    header_controls,
+    controls_extra,
+    data_loader,
+    on_axis_change,
+    on_error,
+    pan = {},
+    ...rest
+  }: HTMLAttributes<HTMLDivElement> & BasePlotProps & PlotConfig & {
+    series?: BarSeries<Metadata>[]
+    // Component-specific props
+    orientation?: Orientation
+    mode?: BarMode
+    legend?: LegendConfig | null
+    show_legend?: boolean
+    bar?: BarStyle
+    line?: LineStyle
+    tooltip?: Snippet<[BarHandlerProps<Metadata>]>
+    user_content?: Snippet<[UserContentProps]>
+    header_controls?: Snippet<
+      [{ height: number; width: number; fullscreen: boolean }]
+    >
+    controls_extra?: Snippet<
+      [{ orientation: Orientation; mode: BarMode } & Required<PlotConfig>]
+    >
+    change?: (data: BarHandlerProps<Metadata> | null) => void
+    on_bar_click?: (
+      data: BarHandlerProps<Metadata> & { event: MouseEvent | KeyboardEvent },
+    ) => void
+    on_bar_hover?: (
+      data:
+        | (BarHandlerProps<Metadata> & {
+          event: MouseEvent | FocusEvent | KeyboardEvent
+        })
+        | null,
+    ) => void
+    // Line marker props (matching ScatterPlot)
+    // Note: For line series with markers, BOTH on_bar_* AND on_point_* events fire.
+    // Use on_point_* for marker-specific data (includes `point` with InternalPoint details)
+    // or on_bar_* for backward compatibility with bar-style event handling.
+    color_scale?: {
+      type?: ScaleType
+      scheme?: D3ColorSchemeName | D3InterpolateName
+      value_range?: [number, number]
+    } | D3InterpolateName
+    size_scale?: {
+      type?: ScaleType
+      radius_range?: [number, number]
+      value_range?: [number, number]
+    }
+    point_tween?: TweenedOptions<XyObj>
+    on_point_click?: (
+      data: LineMarkerHandlerProps & { event: MouseEvent | KeyboardEvent },
+    ) => void
+    on_point_hover?: (
+      data:
+        | (LineMarkerHandlerProps & {
+          event: MouseEvent | FocusEvent | KeyboardEvent
+        })
+        | null,
+    ) => void
+    ref_lines?: RefLine[]
+    on_ref_line_click?: (event: RefLineEvent) => void
+    on_ref_line_hover?: (event: RefLineEvent | null) => void
+    // Interactive axis props
+    data_loader?: DataLoaderFn<Metadata, BarSeries<Metadata>>
+    on_axis_change?: (
+      axis: `x` | `x2` | `y` | `y2`,
+      key: string,
+      new_series: BarSeries<Metadata>[],
+    ) => void
+    on_error?: (error: AxisLoadError) => void
+    pan?: PanConfig
+  } = $props()
+
+  // Initialize bar, line, y2_axis with defaults - using $derived for reactivity
+  let bar_state = $derived({ ...DEFAULTS.bar.bar, ...bar })
+  let line_state = $derived({ ...DEFAULTS.bar.line, ...line })
+  y2_axis = {
     format: ``,
     scale_type: `linear`,
     ticks: 5,
@@ -37,636 +229,1082 @@ y2_axis = {
     tick: { label: { shift: { x: 0, y: 0 } } }, // base offset handled in rendering
     range: [null, null],
     ...y2_axis,
-};
-let [width, height] = $state([0, 0]);
-let wrapper = $state();
-let svg_element = $state(null);
-let clip_path_id = `chart-clip-${crypto?.randomUUID?.()}`;
-// Reference line hover state
-let hovered_ref_line_idx = $state(null);
-// Interactive axis loading state
-let axis_loading = $state(null);
-// Compute ref_lines with index and group by z-index (using shared utilities)
-let indexed_ref_lines = $derived(index_ref_lines(ref_lines));
-let ref_lines_by_z = $derived(group_ref_lines_by_z(indexed_ref_lines));
-// Compute auto ranges from visible series
-let visible_series = $derived(series.filter((srs) => srs?.visible ?? true));
-// Separate series by y-axis
-let y1_series = $derived(visible_series.filter((srs) => (srs.y_axis ?? `y1`) === `y1`));
-let y2_series = $derived(visible_series.filter((srs) => srs.y_axis === `y2`));
-let auto_ranges = $derived.by(() => {
+  }
+  x2_axis = {
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    label_shift: { x: 0, y: 40 },
+    tick: { label: { shift: { x: 0, y: 0 } } },
+    range: [null, null],
+    ...x2_axis,
+  }
+
+  let [width, height] = $state([0, 0])
+  let wrapper: HTMLDivElement | undefined = $state()
+  let svg_element: SVGElement | null = $state(null)
+  let clip_path_id = `chart-clip-${crypto?.randomUUID?.()}`
+
+  // Reference line hover state
+  let hovered_ref_line_idx = $state<number | null>(null)
+
+  // Interactive axis loading state
+  let axis_loading = $state<`x` | `x2` | `y` | `y2` | null>(null)
+
+  // Compute ref_lines with index and group by z-index (using shared utilities)
+  let indexed_ref_lines = $derived(index_ref_lines(ref_lines))
+  let ref_lines_by_z = $derived(group_ref_lines_by_z(indexed_ref_lines))
+
+  // === Categorical Normalization ===
+  // Internal type with guaranteed numeric x (for downstream scale/rendering code)
+  type NumericBarSeries = Omit<BarSeries<Metadata>, `x`> & { x: readonly number[] }
+
+  let is_categorical = $derived(
+    series.some((srs) => srs.x.some((val) => typeof val === `string`)),
+  )
+
+  let category_list = $derived.by(() => {
+    if (!is_categorical) return [] as string[]
+    if (x_axis.categories?.length) return [...x_axis.categories]
+    return [...new Set(series.flatMap((srs) => srs.x.map(String)))]
+  })
+
+  let category_indices = $derived(
+    category_list.length ? category_list.map((_, idx) => idx) : null,
+  )
+
+  let internal_series = $derived.by<NumericBarSeries[]>(() => {
+    // safe: when !category_indices, all x values are numeric (is_categorical is false)
+    if (!category_indices) return series as unknown as NumericBarSeries[]
+    return series.map((srs) => {
+      const orig_map = new Map(srs.x.map((val, idx) => [String(val), idx]))
+      if (orig_map.size < srs.x.length) {
+        console.warn(
+          `BarPlot: series "${
+            srs.label ?? `?`
+          }" has duplicate x values — last occurrence wins`,
+        )
+      }
+      // Resolve original index for each category (undefined if series lacks it)
+      const orig_indices = category_list.map((cat) => orig_map.get(cat))
+      const remap = <T>(arr: readonly T[] | null | undefined, fallback: T): T[] =>
+        orig_indices.map((oi) => oi != null ? (arr?.[oi] ?? fallback) : fallback)
+      const bw_arr = Array.isArray(srs.bar_width) ? srs.bar_width : null
+      const meta_arr = Array.isArray(srs.metadata) ? srs.metadata : null
+      return {
+        ...srs,
+        x: category_indices,
+        y: remap(srs.y, srs.render_mode === `line` ? NaN : 0),
+        labels: remap(srs.labels, null),
+        metadata: orig_indices.map((oi) =>
+          oi != null ? (meta_arr ? meta_arr[oi] : srs.metadata) : undefined
+        ) as Metadata[],
+        ...(bw_arr ? { bar_width: remap(bw_arr, 0.5) } : {}),
+        ...(srs.color_values ? { color_values: remap(srs.color_values, null) } : {}),
+        ...(srs.size_values ? { size_values: remap(srs.size_values, null) } : {}),
+      } as NumericBarSeries
+    })
+  })
+
+  // Compute auto ranges from visible series
+  let visible_series = $derived(
+    internal_series.filter((srs) => srs?.visible ?? true),
+  )
+
+  // Separate series by y-axis
+  let y1_series = $derived(
+    visible_series.filter((srs) => (srs.y_axis ?? `y1`) === `y1`),
+  )
+  let y2_series = $derived(
+    visible_series.filter((srs) => srs.y_axis === `y2`),
+  )
+  let x2_series = $derived(
+    visible_series.filter((srs) => srs.x_axis === `x2`),
+  )
+
+  let auto_ranges = $derived.by(() => {
     // Calculate separate ranges for y1 and y2 axes
-    const calc_y_range = (series_list, y_limit, scale_type) => {
-        let points = series_list.flatMap((srs) => srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] })));
-        // In stacked mode, calculate stacked totals for accurate range (only for bars on the same axis)
-        if (mode === `stacked`) {
-            const stacked_totals = new SvelteMap();
-            // Only include visible bar series (not lines) in stacking
-            series_list
-                .filter((srs) => srs.render_mode !== `line`)
-                .forEach((srs) => srs.x.forEach((x_val, idx) => {
-                const y_val = srs.y[idx] ?? 0;
-                const totals = stacked_totals.get(x_val) ?? { pos: 0, neg: 0 };
-                if (y_val >= 0)
-                    totals.pos += y_val;
-                else
-                    totals.neg += y_val;
-                stacked_totals.set(x_val, totals);
-            }));
-            // Replace points with stacked totals + line series (which don't stack)
-            points = [
-                ...Array.from(stacked_totals).flatMap(([x_val, { pos, neg }]) => [
-                    ...(pos > 0 ? [{ x: x_val, y: pos }] : []),
-                    ...(neg < 0 ? [{ x: x_val, y: neg }] : []),
-                ]),
-                ...series_list
-                    .filter((srs) => srs.render_mode === `line`)
-                    .flatMap((srs) => srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))),
-            ];
-        }
-        if (!points.length)
-            return [0, 1];
-        let y_range = get_nice_data_range(points, (pt) => pt.y, y_limit, scale_type, range_padding, false);
-        // For bar plots, ensure the value axis starts at 0 unless there are negative values
-        // Only apply zero-clamping for linear and arcsinh scales (not log)
-        const type_name = get_scale_type_name(scale_type);
-        if (type_name === `linear` || type_name === `arcsinh`) {
-            const has_negative = points.some((pt) => pt.y < 0);
-            const has_positive = points.some((pt) => pt.y > 0);
-            // Only adjust if no explicit y_range is set
-            if (y_limit?.[0] == null && y_limit?.[1] == null) {
-                if (has_positive && !has_negative)
-                    y_range = [0, y_range[1]];
-                else if (has_negative && !has_positive)
-                    y_range = [y_range[0], 0];
-            }
+    const calc_y_range = (
+      series_list: typeof visible_series,
+      y_limit: typeof y_range,
+      scale_type: ScaleType,
+    ) => {
+      let points = series_list.flatMap((srs) =>
+        srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))
+      )
+
+      // In stacked mode, calculate stacked totals for accurate range (only for bars on the same axis)
+      if (mode === `stacked`) {
+        const stacked_totals = new SvelteMap<number, { pos: number; neg: number }>()
+
+        // Only include visible bar series (not lines) in stacking
+        series_list
+          .filter((srs) => srs.render_mode !== `line`)
+          .forEach((srs) =>
+            srs.x.forEach((x_val, idx) => {
+              const y_val = srs.y[idx] ?? 0
+              const totals = stacked_totals.get(x_val) ?? { pos: 0, neg: 0 }
+              if (y_val >= 0) totals.pos += y_val
+              else totals.neg += y_val
+              stacked_totals.set(x_val, totals)
+            })
+          )
+
+        // Replace points with stacked totals + line series (which don't stack)
+        points = [
+          ...Array.from(stacked_totals).flatMap(([x_val, { pos, neg }]) => [
+            ...(pos > 0 ? [{ x: x_val, y: pos }] : []),
+            ...(neg < 0 ? [{ x: x_val, y: neg }] : []),
+          ]),
+          ...series_list
+            .filter((srs) => srs.render_mode === `line`)
+            .flatMap((srs) =>
+              srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))
+            ),
+        ]
+      }
+
+      if (!points.length) return [0, 1]
+
+      let y_range = get_nice_data_range(
+        points,
+        (pt) => pt.y,
+        y_limit,
+        scale_type,
+        range_padding,
+        false,
+      )
+
+      // For bar plots, ensure the value axis starts at 0 unless there are negative values
+      // Only apply zero-clamping for linear and arcsinh scales (not log)
+      const type_name = get_scale_type_name(scale_type)
+      if (type_name === `linear` || type_name === `arcsinh`) {
+        const has_negative = points.some((pt) => pt.y < 0)
+        const has_positive = points.some((pt) => pt.y > 0)
+
+        // Only adjust if no explicit y_range is set
+        if (y_limit?.[0] == null && y_limit?.[1] == null) {
+          if (has_positive && !has_negative) y_range = [0, y_range[1]]
+          else if (has_negative && !has_positive) y_range = [y_range[0], 0]
         }
-        return y_range;
-    };
-    // Get all x values for x_range calculation
-    const all_x_points = visible_series.flatMap((srs) => srs.x.map((x_val) => ({ x: x_val, y: 0 })));
-    const x_scale_type = x_axis.scale_type ?? `linear`;
-    const x_auto_range = all_x_points.length
-        ? get_nice_data_range(all_x_points, (pt) => pt.x, x_range, x_scale_type, range_padding, x_axis.format?.startsWith(`%`) || false)
-        : [0, 1];
-    const y1_range = calc_y_range(y1_series, y_range, y_axis.scale_type ?? `linear`);
-    const y2_auto_range = calc_y_range(y2_series, y2_range, y2_axis.scale_type ?? `linear`);
+      }
+
+      return y_range
+    }
+
+    // Get x values split by axis for range calculation
+    // For categorical data, use fixed range centered on integer indices
+    let x_auto_range: number[]
+    if (category_list.length) {
+      x_auto_range = [-0.5, category_list.length - 0.5]
+    } else {
+      const x1_x_points = visible_series
+        .filter((srs) => (srs.x_axis ?? `x1`) === `x1`)
+        .flatMap((srs) => srs.x.map((x_val) => ({ x: x_val, y: 0 })))
+      x_auto_range = x1_x_points.length
+        ? get_nice_data_range(
+          x1_x_points,
+          (pt) => pt.x,
+          x_range,
+          x_axis.scale_type ?? `linear`,
+          range_padding,
+          x_axis.format?.startsWith(`%`) || false,
+        )
+        : [0, 1]
+    }
+
+    const x2_x_points = x2_series.flatMap((srs) =>
+      srs.x.map((x_val) => ({ x: x_val, y: 0 }))
+    )
+    const x2_scale_type = x2_axis.scale_type ?? `linear`
+    const x2_auto_range = x2_x_points.length
+      ? get_nice_data_range(
+        x2_x_points,
+        (pt) => pt.x,
+        x2_range,
+        x2_scale_type,
+        range_padding,
+        x2_axis.format?.startsWith(`%`) || false,
+      )
+      : [0, 1]
+
+    const y1_range = calc_y_range(y1_series, y_range, y_axis.scale_type ?? `linear`)
+    const y2_auto_range = calc_y_range(
+      y2_series,
+      y2_range,
+      y2_axis.scale_type ?? `linear`,
+    )
+
     // Map data ranges to axis ranges depending on orientation
     return orientation === `horizontal`
-        ? ({ x: y1_range, y: x_auto_range, y2: y2_auto_range })
-        : ({ x: x_auto_range, y: y1_range, y2: y2_auto_range });
-});
-// Initialize and current ranges
-let ranges = $state({
-    initial: { x: [0, 1], y: [0, 1], y2: [0, 1] },
-    current: { x: [0, 1], y: [0, 1], y2: [0, 1] },
-});
-$effect(() => {
+      ? ({ x: y1_range, x2: x2_auto_range, y: x_auto_range, y2: y2_auto_range })
+      : ({ x: x_auto_range, x2: x2_auto_range, y: y1_range, y2: y2_auto_range })
+  })
+
+  // Initialize and current ranges
+  let ranges = $state<{
+    initial: { x: Vec2; x2: Vec2; y: Vec2; y2: Vec2 }
+    current: { x: Vec2; x2: Vec2; y: Vec2; y2: Vec2 }
+  }>({
+    initial: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
+    current: { x: [0, 1], x2: [0, 1], y: [0, 1], y2: [0, 1] },
+  })
+
+  $effect(() => { // handle x_axis.range / x2_axis.range / y_axis.range / y2_axis.range changes
     const new_x = [
-        x_axis.range?.[0] ?? auto_ranges.x[0],
-        x_axis.range?.[1] ?? auto_ranges.x[1],
-    ];
+      x_axis.range?.[0] ?? auto_ranges.x[0],
+      x_axis.range?.[1] ?? auto_ranges.x[1],
+    ] as Vec2
+    const new_x2 = [
+      x2_axis.range?.[0] ?? auto_ranges.x2[0],
+      x2_axis.range?.[1] ?? auto_ranges.x2[1],
+    ] as Vec2
     const new_y = [
-        y_axis.range?.[0] ?? auto_ranges.y[0],
-        y_axis.range?.[1] ?? auto_ranges.y[1],
-    ];
+      y_axis.range?.[0] ?? auto_ranges.y[0],
+      y_axis.range?.[1] ?? auto_ranges.y[1],
+    ] as Vec2
     const new_y2 = [
-        y2_axis.range?.[0] ?? auto_ranges.y2[0],
-        y2_axis.range?.[1] ?? auto_ranges.y2[1],
-    ];
+      y2_axis.range?.[0] ?? auto_ranges.y2[0],
+      y2_axis.range?.[1] ?? auto_ranges.y2[1],
+    ] as Vec2
     // Only update if the initial (data-driven) ranges changed, not when user pans
     // Comparing against initial preserves user's pan/zoom state
-    if (ranges.initial.x[0] !== new_x[0] ||
-        ranges.initial.x[1] !== new_x[1] ||
-        ranges.initial.y[0] !== new_y[0] ||
-        ranges.initial.y[1] !== new_y[1] ||
-        ranges.initial.y2[0] !== new_y2[0] ||
-        ranges.initial.y2[1] !== new_y2[1]) {
-        ranges = {
-            initial: { x: new_x, y: new_y, y2: new_y2 },
-            current: { x: new_x, y: new_y, y2: new_y2 },
-        };
+    if (
+      ranges.initial.x[0] !== new_x[0] ||
+      ranges.initial.x[1] !== new_x[1] ||
+      ranges.initial.x2[0] !== new_x2[0] ||
+      ranges.initial.x2[1] !== new_x2[1] ||
+      ranges.initial.y[0] !== new_y[0] ||
+      ranges.initial.y[1] !== new_y[1] ||
+      ranges.initial.y2[0] !== new_y2[0] ||
+      ranges.initial.y2[1] !== new_y2[1]
+    ) {
+      ranges = {
+        initial: { x: new_x, x2: new_x2, y: new_y, y2: new_y2 },
+        current: { x: new_x, x2: new_x2, y: new_y, y2: new_y2 },
+      }
     }
-});
-// Layout: dynamic padding based on tick label widths
-const default_padding = { t: 20, b: 60, l: 60, r: 20 };
-let pad = $derived(filter_padding(padding, default_padding));
-// Update padding when format or ticks change
-$effect(() => {
+  })
+
+  // Layout: dynamic padding based on tick label widths
+  const default_padding = { t: 20, b: 60, l: 60, r: 20 }
+  let pad = $derived(filter_padding(padding, default_padding))
+
+  // Update padding when format or ticks change
+  $effect(() => {
     const new_pad = width && height && ticks.y.length
-        ? calc_auto_padding({
-            padding,
-            default_padding,
-            y_axis: { ...y_axis, tick_values: ticks.y },
-            y2_axis: { ...y2_axis, tick_values: ticks.y2 },
-        })
-        : filter_padding(padding, default_padding);
+      ? calc_auto_padding({
+        padding,
+        default_padding,
+        x2_axis: { ...x2_axis, tick_values: ticks.x2 },
+        y_axis: { ...y_axis, tick_values: ticks.y },
+        y2_axis: { ...y2_axis, tick_values: ticks.y2 },
+      })
+      : filter_padding(padding, default_padding)
     // Expand right padding if y2 ticks are shown (only for vertical orientation)
-    if (width && height && y2_series.length && ticks.y2.length &&
-        orientation === `vertical`) {
-        const y2_tick_width = Math.max(0, ...ticks.y2.map((tick) => measure_text_width(format_value(tick, y2_axis.format), `12px sans-serif`)));
-        // Need space for: tick shift + tick width + gap (30px) + label space (20px if present)
-        // When ticks are inside, they don't contribute to padding
-        const inside = y2_axis.tick?.label?.inside ?? false;
-        const tick_shift = inside ? 0 : (y2_axis.tick?.label?.shift?.x ?? 0) + 8;
-        const tick_width_contribution = inside ? 0 : y2_tick_width;
-        const label_space = y2_axis.label ? 20 : 0;
-        new_pad.r = Math.max(new_pad.r, tick_shift + tick_width_contribution + 30 + label_space);
+    if (
+      width && height && y2_series.length && ticks.y2.length &&
+      orientation === `vertical`
+    ) {
+      // Need space for: tick shift + tick width + gap (30px) + label space (20px if present)
+      // When ticks are inside, they don't contribute to padding
+      const inside = y2_axis.tick?.label?.inside ?? false
+      const tick_shift = inside ? 0 : (y2_axis.tick?.label?.shift?.x ?? 0) + 8
+      const tick_width_contribution = inside ? 0 : tick_label_widths.y2_max
+      const label_space = y2_axis.label ? 20 : 0
+      new_pad.r = Math.max(
+        new_pad.r,
+        tick_shift + tick_width_contribution + 30 + label_space,
+      )
+    }
+    // Expand top padding if x2 ticks are shown (only for vertical orientation)
+    if (
+      width && height && x2_series.length && ticks.x2.length &&
+      orientation === `vertical`
+    ) {
+      const inside = x2_axis.tick?.label?.inside ?? false
+      const tick_shift = inside ? 0 : Math.abs(x2_axis.tick?.label?.shift?.y ?? 0) + 5
+      const tick_height = inside ? 0 : 16
+      const label_space = x2_axis.label ? 20 : 0
+      new_pad.t = Math.max(new_pad.t, tick_shift + tick_height + 30 + label_space)
     }
+
     // Only update if padding actually changed (prevents infinite loop)
-    if (pad.t !== new_pad.t || pad.b !== new_pad.b || pad.l !== new_pad.l ||
-        pad.r !== new_pad.r)
-        pad = new_pad;
-});
-const chart_width = $derived(Math.max(1, width - pad.l - pad.r));
-const chart_height = $derived(Math.max(1, height - pad.t - pad.b));
-// Scales
-let scales = $derived({
+    if (
+      pad.t !== new_pad.t || pad.b !== new_pad.b || pad.l !== new_pad.l ||
+      pad.r !== new_pad.r
+    ) pad = new_pad
+  })
+  const chart_width = $derived(Math.max(1, width - pad.l - pad.r))
+  const chart_height = $derived(Math.max(1, height - pad.t - pad.b))
+
+  // Scales
+  let scales = $derived({
     x: create_scale(x_axis.scale_type ?? `linear`, ranges.current.x, [
-        pad.l,
-        width - pad.r,
+      pad.l,
+      width - pad.r,
+    ]),
+    x2: create_scale(x2_axis.scale_type ?? `linear`, ranges.current.x2, [
+      pad.l,
+      width - pad.r,
     ]),
     y: create_scale(y_axis.scale_type ?? `linear`, ranges.current.y, [
-        height - pad.b,
-        pad.t,
+      height - pad.b,
+      pad.t,
     ]),
     y2: create_scale(y2_axis.scale_type ?? `linear`, ranges.current.y2, [
-        height - pad.b,
-        pad.t,
+      height - pad.b,
+      pad.t,
     ]),
-});
-// Compute plot center for point tweening origin
-let plot_center_x = $derived(pad.l + (width - pad.r - pad.l) / 2);
-let plot_center_y = $derived(pad.t + (height - pad.b - pad.t) / 2);
-// Compute color values from line series for color scaling (filter to numbers only)
-let all_color_values = $derived(visible_series
-    .filter((srs) => srs.render_mode === `line`)
-    .flatMap((srs) => (srs.color_values ?? []).filter((val) => typeof val === `number`)));
-// Create auto color range (safely handle empty arrays or undefined extent results)
-let auto_color_range = $derived.by(() => {
-    if (all_color_values.length === 0)
-        return [0, 1];
-    const [min_val, max_val] = extent(all_color_values);
-    return [min_val ?? 0, max_val ?? 1];
-});
-// All size values from line series (for size scale, filter to numbers only)
-let all_size_values = $derived(visible_series
-    .filter((srs) => srs.render_mode === `line`)
-    .flatMap((srs) => [...(srs.size_values ?? [])].filter((val) => typeof val === `number`)));
-// Color scale function (using shared utility)
-let color_scale_fn = $derived(create_color_scale(color_scale, auto_color_range));
-// Size scale function (using shared utility)
-let size_scale_fn = $derived(create_size_scale(size_scale, all_size_values));
-// Ticks
-let ticks = $derived({
+  })
+
+  // Compute plot center for point tweening origin
+  let plot_center_x = $derived(pad.l + (width - pad.r - pad.l) / 2)
+  let plot_center_y = $derived(pad.t + (height - pad.b - pad.t) / 2)
+
+  // Compute color values from line series for color scaling (filter to numbers only)
+  let all_color_values = $derived(
+    visible_series
+      .filter((srs: BarSeries<Metadata>) => srs.render_mode === `line`)
+      .flatMap((srs: BarSeries<Metadata>) =>
+        (srs.color_values ?? []).filter(
+          (val): val is number => typeof val === `number`,
+        )
+      ),
+  )
+
+  // Create auto color range (safely handle empty arrays or undefined extent results)
+  let auto_color_range: [number, number] = $derived.by(() => {
+    if (all_color_values.length === 0) return [0, 1]
+    const [min_val, max_val] = extent(all_color_values)
+    return [min_val ?? 0, max_val ?? 1]
+  })
+
+  // All size values from line series (for size scale, filter to numbers only)
+  let all_size_values = $derived(
+    visible_series
+      .filter((srs: BarSeries<Metadata>) => srs.render_mode === `line`)
+      .flatMap((srs: BarSeries<Metadata>) =>
+        [...(srs.size_values ?? [])].filter(
+          (val): val is number => typeof val === `number`,
+        )
+      ),
+  )
+
+  // Color scale function (using shared utility)
+  let color_scale_fn = $derived(create_color_scale(color_scale, auto_color_range))
+
+  // Size scale function (using shared utility)
+  let size_scale_fn = $derived(create_size_scale(size_scale, all_size_values))
+
+  // Auto-generate tick labels for categorical data (unless user provides explicit ticks)
+  // In vertical mode categories are on x-axis; in horizontal mode on y-axis
+  let cat_axis = $derived(orientation === `horizontal` ? `y` : `x`)
+  let effective_cat_ticks = $derived.by(() => {
+    if (!category_list.length) return undefined
+    // Only respect user ticks when they're a Record (custom label mapping),
+    // not a number (tick count) or array (tick positions)
+    const user_ticks = cat_axis === `x` ? x_axis.ticks : y_axis.ticks
+    if (
+      user_ticks != null && typeof user_ticks === `object` &&
+      !Array.isArray(user_ticks)
+    ) return user_ticks
+    return Object.fromEntries(
+      category_list.map((cat, idx) => [idx, cat]),
+    ) as Record<number, string>
+  })
+
+  // Ticks
+  let ticks = $derived({
     x: width && height
-        ? generate_ticks(ranges.current.x, x_axis.scale_type ?? `linear`, x_axis.ticks, scales.x, {
-            default_count: 8,
-        })
-        : [],
+      ? (category_indices && cat_axis === `x` ? category_indices : generate_ticks(
+        ranges.current.x,
+        x_axis.scale_type ?? `linear`,
+        x_axis.ticks,
+        scales.x,
+        { default_count: 8 },
+      ))
+      : [],
     y: width && height
-        ? generate_ticks(ranges.current.y, y_axis.scale_type ?? `linear`, y_axis.ticks, scales.y, {
-            default_count: 6,
-        })
-        : [],
+      ? (category_indices && cat_axis === `y` ? category_indices : generate_ticks(
+        ranges.current.y,
+        y_axis.scale_type ?? `linear`,
+        y_axis.ticks,
+        scales.y,
+        { default_count: 6 },
+      ))
+      : [],
     y2: width && height && y2_series.length > 0 && orientation === `vertical`
-        ? generate_ticks(ranges.current.y2, y2_axis.scale_type ?? `linear`, y2_axis.ticks, scales.y2, {
-            default_count: 6,
-        })
-        : [],
-});
-// Zoom drag state
-let drag_state = $state({ start: null, current: null, bounds: null });
-// Pan state
-let is_focused = $state(false);
-let shift_held = $state(false);
-let pan_drag_state = $state(null);
-let touch_state = $state(null);
-const on_window_mouse_move = (evt) => {
-    if (!drag_state.start || !drag_state.bounds)
-        return;
+      ? generate_ticks(
+        ranges.current.y2,
+        y2_axis.scale_type ?? `linear`,
+        y2_axis.ticks,
+        scales.y2,
+        {
+          default_count: 6,
+        },
+      )
+      : [],
+    x2: width && height && x2_series.length > 0 && orientation === `vertical`
+      ? generate_ticks(
+        ranges.current.x2,
+        x2_axis.scale_type ?? `linear`,
+        x2_axis.ticks,
+        scales.x2,
+        {
+          default_count: 8,
+        },
+      )
+      : [],
+  })
+
+  // Cache measured tick-label widths so expensive canvas text measurement
+  // only runs when ticks/format change, not on every template rerender.
+  let tick_label_widths = $derived({
+    y_max: measure_max_tick_width(ticks.y, y_axis.format ?? ``),
+    y2_max: measure_max_tick_width(ticks.y2, y2_axis.format ?? ``),
+    x2_max: measure_max_tick_width(ticks.x2, x2_axis.format ?? ``),
+  })
+
+  // Zoom drag state
+  let drag_state = $state<{
+    start: { x: number; y: number } | null
+    current: { x: number; y: number } | null
+    bounds: DOMRect | null
+  }>({ start: null, current: null, bounds: null })
+
+  // Pan state
+  let is_focused = $state(false)
+  let shift_held = $state(false)
+  let pan_drag_state = $state<
+    InitialRanges & { start: { x: number; y: number } } | null
+  >(null)
+  let touch_state = $state<
+    InitialRanges & { start_touches: { x: number; y: number }[] } | null
+  >(null)
+  const on_window_mouse_move = (evt: MouseEvent) => {
+    if (!drag_state.start || !drag_state.bounds) return
     drag_state.current = {
-        x: evt.clientX - drag_state.bounds.left,
-        y: evt.clientY - drag_state.bounds.top,
-    };
-};
-const on_window_mouse_up = () => {
+      x: evt.clientX - drag_state.bounds.left,
+      y: evt.clientY - drag_state.bounds.top,
+    }
+  }
+  const on_window_mouse_up = () => {
     if (drag_state.start && drag_state.current) {
-        const x1_raw = scales.x.invert(drag_state.start.x);
-        const x2_raw = scales.x.invert(drag_state.current.x);
-        const y1 = scales.y.invert(drag_state.start.y);
-        const y2 = scales.y.invert(drag_state.current.y);
-        const y2_1 = scales.y2.invert(drag_state.start.y);
-        const y2_2 = scales.y2.invert(drag_state.current.y);
-        const dx = Math.abs(drag_state.start.x - drag_state.current.x);
-        const dy = Math.abs(drag_state.start.y - drag_state.current.y);
-        let xr1, xr2;
-        if (x1_raw instanceof Date && x2_raw instanceof Date) {
-            ;
-            [xr1, xr2] = [x1_raw.getTime(), x2_raw.getTime()];
-        }
-        else if (typeof x1_raw === `number` && typeof x2_raw === `number`) {
-            ;
-            [xr1, xr2] = [x1_raw, x2_raw];
-        }
-        else
-            [xr1, xr2] = [NaN, NaN]; // bail: mixed types
-        if (dx > 5 && dy > 5 && Number.isFinite(xr1) && Number.isFinite(xr2)) {
-            // Update axis ranges to trigger reactivity and prevent effect from overriding
-            x_axis = { ...x_axis, range: [Math.min(xr1, xr2), Math.max(xr1, xr2)] };
-            y_axis = { ...y_axis, range: [Math.min(y1, y2), Math.max(y1, y2)] };
-            y2_axis = { ...y2_axis, range: [Math.min(y2_1, y2_2), Math.max(y2_1, y2_2)] };
+      const x1_raw = scales.x.invert(drag_state.start.x) as number | Date
+      const x2_raw = scales.x.invert(drag_state.current.x) as number | Date
+      const y1 = scales.y.invert(drag_state.start.y)
+      const y2 = scales.y.invert(drag_state.current.y)
+      const y2_1 = scales.y2.invert(drag_state.start.y)
+      const y2_2 = scales.y2.invert(drag_state.current.y)
+      const x2a_1_raw = scales.x2.invert(drag_state.start.x) as number | Date
+      const x2a_2_raw = scales.x2.invert(drag_state.current.x) as number | Date
+      const dx = Math.abs(drag_state.start.x - drag_state.current.x)
+      const dy = Math.abs(drag_state.start.y - drag_state.current.y)
+
+      let xr1: number, xr2: number
+      if (x1_raw instanceof Date && x2_raw instanceof Date) {
+        ;[xr1, xr2] = [x1_raw.getTime(), x2_raw.getTime()]
+      } else if (typeof x1_raw === `number` && typeof x2_raw === `number`) {
+        ;[xr1, xr2] = [x1_raw, x2_raw]
+      } else [xr1, xr2] = [NaN, NaN] // bail: mixed types
+
+      let x2r1: number, x2r2: number
+      if (x2a_1_raw instanceof Date && x2a_2_raw instanceof Date) {
+        ;[x2r1, x2r2] = [x2a_1_raw.getTime(), x2a_2_raw.getTime()]
+      } else if (typeof x2a_1_raw === `number` && typeof x2a_2_raw === `number`) {
+        ;[x2r1, x2r2] = [x2a_1_raw, x2a_2_raw]
+      } else [x2r1, x2r2] = [NaN, NaN]
+
+      if (dx > 5 && dy > 5 && Number.isFinite(xr1) && Number.isFinite(xr2)) {
+        // Update axis ranges to trigger reactivity and prevent effect from overriding
+        x_axis = { ...x_axis, range: [Math.min(xr1, xr2), Math.max(xr1, xr2)] }
+        if (x2_series.length > 0 && Number.isFinite(x2r1) && Number.isFinite(x2r2)) {
+          x2_axis = {
+            ...x2_axis,
+            range: [Math.min(x2r1, x2r2), Math.max(x2r1, x2r2)],
+          }
         }
+        y_axis = { ...y_axis, range: [Math.min(y1, y2), Math.max(y1, y2)] }
+        y2_axis = { ...y2_axis, range: [Math.min(y2_1, y2_2), Math.max(y2_1, y2_2)] }
+      }
     }
-    drag_state = { start: null, current: null, bounds: null };
-    window.removeEventListener(`mousemove`, on_window_mouse_move);
-    window.removeEventListener(`mouseup`, on_window_mouse_up);
-    document.body.style.cursor = `default`;
-};
-// Pan drag handlers
-const on_pan_move = (evt) => {
-    if (!pan_drag_state)
-        return;
-    const dx = evt.clientX - pan_drag_state.start.x;
-    const dy = evt.clientY - pan_drag_state.start.y;
+    drag_state = { start: null, current: null, bounds: null }
+    window.removeEventListener(`mousemove`, on_window_mouse_move)
+    window.removeEventListener(`mouseup`, on_window_mouse_up)
+    document.body.style.cursor = `default`
+  }
+
+  // Pan drag handlers
+  const on_pan_move = (evt: MouseEvent) => {
+    if (!pan_drag_state) return
+    const dx = evt.clientX - pan_drag_state.start.x
+    const dy = evt.clientY - pan_drag_state.start.y
+
     // Convert pixel delta to data delta (note: drag direction is inverted for natural pan feel)
-    const sensitivity = pan?.drag_sensitivity ?? 1;
-    const x_delta = pixels_to_data_delta(-dx * sensitivity, pan_drag_state.initial_x_range, chart_width);
-    const y_delta = pixels_to_data_delta(dy * sensitivity, pan_drag_state.initial_y_range, chart_height);
-    const y2_delta = pixels_to_data_delta(dy * sensitivity, pan_drag_state.initial_y2_range, chart_height);
-    ranges.current.x = pan_range(pan_drag_state.initial_x_range, x_delta);
-    ranges.current.y = pan_range(pan_drag_state.initial_y_range, y_delta);
-    ranges.current.y2 = pan_range(pan_drag_state.initial_y2_range, y2_delta);
-};
-const on_pan_end = () => {
-    pan_drag_state = null;
-    document.body.style.cursor = ``;
-    window.removeEventListener(`mousemove`, on_pan_move);
-    window.removeEventListener(`mouseup`, on_pan_end);
-};
-function handle_mouse_down(evt) {
-    const coords = get_relative_coords(evt);
-    if (!coords || !svg_element)
-        return;
+    const sensitivity = pan?.drag_sensitivity ?? 1
+
+    const x_delta = pixels_to_data_delta(
+      -dx * sensitivity,
+      pan_drag_state.initial_x_range,
+      chart_width,
+    )
+    const x2_delta = pixels_to_data_delta(
+      -dx * sensitivity,
+      pan_drag_state.initial_x2_range,
+      chart_width,
+    )
+    const y_delta = pixels_to_data_delta(
+      dy * sensitivity,
+      pan_drag_state.initial_y_range,
+      chart_height,
+    )
+    const y2_delta = pixels_to_data_delta(
+      dy * sensitivity,
+      pan_drag_state.initial_y2_range,
+      chart_height,
+    )
+
+    ranges.current.x = pan_range(pan_drag_state.initial_x_range, x_delta)
+    ranges.current.x2 = pan_range(pan_drag_state.initial_x2_range, x2_delta)
+    ranges.current.y = pan_range(pan_drag_state.initial_y_range, y_delta)
+    ranges.current.y2 = pan_range(pan_drag_state.initial_y2_range, y2_delta)
+  }
+
+  const on_pan_end = () => {
+    pan_drag_state = null
+    document.body.style.cursor = ``
+    window.removeEventListener(`mousemove`, on_pan_move)
+    window.removeEventListener(`mouseup`, on_pan_end)
+  }
+
+  function handle_mouse_down(evt: MouseEvent) {
+    const coords = get_relative_coords(evt)
+    if (!coords || !svg_element) return
+
     // Check if pan is enabled and shift is held for pan mode
-    const pan_enabled = pan?.enabled !== false;
+    const pan_enabled = pan?.enabled !== false
     if (pan_enabled && evt.shiftKey) {
-        evt.preventDefault();
-        pan_drag_state = {
-            start: { x: evt.clientX, y: evt.clientY },
-            initial_x_range: [...ranges.current.x],
-            initial_y_range: [...ranges.current.y],
-            initial_y2_range: [...ranges.current.y2],
-        };
-        document.body.style.cursor = `grabbing`;
-        window.addEventListener(`mousemove`, on_pan_move);
-        window.addEventListener(`mouseup`, on_pan_end);
-        return;
+      evt.preventDefault()
+      pan_drag_state = {
+        start: { x: evt.clientX, y: evt.clientY },
+        initial_x_range: [...ranges.current.x] as [number, number],
+        initial_x2_range: [...ranges.current.x2] as [number, number],
+        initial_y_range: [...ranges.current.y] as [number, number],
+        initial_y2_range: [...ranges.current.y2] as [number, number],
+      }
+      document.body.style.cursor = `grabbing`
+      window.addEventListener(`mousemove`, on_pan_move)
+      window.addEventListener(`mouseup`, on_pan_end)
+      return
     }
+
     drag_state = {
-        start: coords,
-        current: coords,
-        bounds: svg_element.getBoundingClientRect(),
-    };
-    window.addEventListener(`mousemove`, on_window_mouse_move);
-    window.addEventListener(`mouseup`, on_window_mouse_up);
-    evt.preventDefault();
-}
-// Wheel handler for pan (requires focus and shift)
-function handle_wheel(evt) {
-    const pan_enabled = pan?.enabled !== false;
+      start: coords,
+      current: coords,
+      bounds: svg_element.getBoundingClientRect(),
+    }
+    window.addEventListener(`mousemove`, on_window_mouse_move)
+    window.addEventListener(`mouseup`, on_window_mouse_up)
+    evt.preventDefault()
+  }
+
+  // Wheel handler for pan (requires focus and shift)
+  function handle_wheel(evt: WheelEvent) {
+    const pan_enabled = pan?.enabled !== false
     // Only capture wheel when focused AND Shift is held
     // Use shift_held state (tracked via keydown/keyup) for compatibility with synthetic events
-    if (!pan_enabled || !is_focused || !shift_held)
-        return;
-    evt.preventDefault();
-    const sensitivity = pan?.wheel_sensitivity ?? 1;
+    if (!pan_enabled || !is_focused || !shift_held) return
+
+    evt.preventDefault()
+
+    const sensitivity = pan?.wheel_sensitivity ?? 1
+
     // Determine pan direction based on wheel delta
-    const x_delta = pixels_to_data_delta(evt.deltaX * sensitivity, ranges.current.x, chart_width);
-    const y_delta = pixels_to_data_delta(evt.deltaY * sensitivity, ranges.current.y, chart_height);
-    const y2_delta = pixels_to_data_delta(evt.deltaY * sensitivity, ranges.current.y2, chart_height);
+    const x_delta = pixels_to_data_delta(
+      evt.deltaX * sensitivity,
+      ranges.current.x,
+      chart_width,
+    )
+    const x2_delta = pixels_to_data_delta(
+      evt.deltaX * sensitivity,
+      ranges.current.x2,
+      chart_width,
+    )
+    const y_delta = pixels_to_data_delta(
+      evt.deltaY * sensitivity,
+      ranges.current.y,
+      chart_height,
+    )
+    const y2_delta = pixels_to_data_delta(
+      evt.deltaY * sensitivity,
+      ranges.current.y2,
+      chart_height,
+    )
+
     if (Math.abs(evt.deltaX) > Math.abs(evt.deltaY)) {
-        ranges.current.x = pan_range(ranges.current.x, x_delta);
+      ranges.current.x = pan_range(ranges.current.x, x_delta)
+      ranges.current.x2 = pan_range(ranges.current.x2, x2_delta)
+    } else {
+      ranges.current.y = pan_range(ranges.current.y, y_delta)
+      ranges.current.y2 = pan_range(ranges.current.y2, y2_delta)
     }
-    else {
-        ranges.current.y = pan_range(ranges.current.y, y_delta);
-        ranges.current.y2 = pan_range(ranges.current.y2, y2_delta);
-    }
-}
-// Touch handlers for pinch-zoom and two-finger pan
-function handle_touch_start(evt) {
-    const touch_enabled = pan?.enabled !== false && pan?.touch_enabled !== false;
-    if (!touch_enabled || evt.touches.length !== 2)
-        return;
-    evt.preventDefault();
-    const touches = Array.from(evt.touches);
+  }
+
+  // Touch handlers for pinch-zoom and two-finger pan
+  function handle_touch_start(evt: TouchEvent) {
+    const touch_enabled = pan?.enabled !== false && pan?.touch_enabled !== false
+    if (!touch_enabled || evt.touches.length !== 2) return
+
+    evt.preventDefault()
+    const touches = Array.from(evt.touches)
     touch_state = {
-        start_touches: touches.map((touch) => ({ x: touch.clientX, y: touch.clientY })),
-        initial_x_range: [...ranges.current.x],
-        initial_y_range: [...ranges.current.y],
-        initial_y2_range: [...ranges.current.y2],
-    };
-}
-function handle_touch_move(evt) {
-    if (!touch_state || evt.touches.length !== 2)
-        return;
-    evt.preventDefault();
-    const [t1, t2] = Array.from(evt.touches);
-    const [s1, s2] = touch_state.start_touches;
+      start_touches: touches.map((touch) => ({ x: touch.clientX, y: touch.clientY })),
+      initial_x_range: [...ranges.current.x] as [number, number],
+      initial_x2_range: [...ranges.current.x2] as [number, number],
+      initial_y_range: [...ranges.current.y] as [number, number],
+      initial_y2_range: [...ranges.current.y2] as [number, number],
+    }
+  }
+
+  function handle_touch_move(evt: TouchEvent) {
+    if (!touch_state || evt.touches.length !== 2) return
+    evt.preventDefault()
+
+    const [t1, t2] = Array.from(evt.touches)
+    const [s1, s2] = touch_state.start_touches
+
     // Calculate center movement for pan
-    const start_center = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 };
+    const start_center = { x: (s1.x + s2.x) / 2, y: (s1.y + s2.y) / 2 }
     const curr_center = {
-        x: (t1.clientX + t2.clientX) / 2,
-        y: (t1.clientY + t2.clientY) / 2,
-    };
-    const dx = curr_center.x - start_center.x;
-    const dy = curr_center.y - start_center.y;
+      x: (t1.clientX + t2.clientX) / 2,
+      y: (t1.clientY + t2.clientY) / 2,
+    }
+    const dx = curr_center.x - start_center.x
+    const dy = curr_center.y - start_center.y
+
     // Calculate pinch scale (curr/start so spread = zoom out, pinch = zoom in)
-    const start_dist = Math.hypot(s2.x - s1.x, s2.y - s1.y);
+    const start_dist = Math.hypot(s2.x - s1.x, s2.y - s1.y)
     // Guard against zero-distance pinch to avoid Infinity scale
-    if (start_dist < Number.EPSILON)
-        return;
-    const curr_dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-    const scale = curr_dist / start_dist;
+    if (start_dist < Number.EPSILON) return
+    const curr_dist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
+    const scale = curr_dist / start_dist
+
     // If scale changed significantly, treat as pinch-zoom
     // Also guard against scale being too small to avoid division by zero
     if (Math.abs(scale - 1) > PINCH_ZOOM_THRESHOLD && scale > Number.EPSILON) {
-        // Pinch zoom centered on gesture center
-        // Divide by scale so spread (scale > 1) = smaller span (zoom in)
-        const x_span = touch_state.initial_x_range[1] - touch_state.initial_x_range[0];
-        const y_span = touch_state.initial_y_range[1] - touch_state.initial_y_range[0];
-        const y2_span = touch_state.initial_y2_range[1] -
-            touch_state.initial_y2_range[0];
-        const x_center = (touch_state.initial_x_range[0] + touch_state.initial_x_range[1]) / 2;
-        const y_center = (touch_state.initial_y_range[0] + touch_state.initial_y_range[1]) / 2;
-        const y2_center = (touch_state.initial_y2_range[0] + touch_state.initial_y2_range[1]) / 2;
-        ranges.current.x = [
-            x_center - x_span / scale / 2,
-            x_center + x_span / scale / 2,
-        ];
-        ranges.current.y = [
-            y_center - y_span / scale / 2,
-            y_center + y_span / scale / 2,
-        ];
-        ranges.current.y2 = [
-            y2_center - y2_span / scale / 2,
-            y2_center + y2_span / scale / 2,
-        ];
-    }
-    else {
-        // Pan
-        const x_delta = pixels_to_data_delta(-dx, touch_state.initial_x_range, chart_width);
-        const y_delta = pixels_to_data_delta(dy, touch_state.initial_y_range, chart_height);
-        const y2_delta = pixels_to_data_delta(dy, touch_state.initial_y2_range, chart_height);
-        ranges.current.x = pan_range(touch_state.initial_x_range, x_delta);
-        ranges.current.y = pan_range(touch_state.initial_y_range, y_delta);
-        ranges.current.y2 = pan_range(touch_state.initial_y2_range, y2_delta);
+      // Pinch zoom centered on gesture center
+      // Divide by scale so spread (scale > 1) = smaller span (zoom in)
+      const x_span = touch_state.initial_x_range[1] - touch_state.initial_x_range[0]
+      const x2_span = touch_state.initial_x2_range[1] -
+        touch_state.initial_x2_range[0]
+      const y_span = touch_state.initial_y_range[1] - touch_state.initial_y_range[0]
+      const y2_span = touch_state.initial_y2_range[1] -
+        touch_state.initial_y2_range[0]
+      const x_center =
+        (touch_state.initial_x_range[0] + touch_state.initial_x_range[1]) / 2
+      const x2_center =
+        (touch_state.initial_x2_range[0] + touch_state.initial_x2_range[1]) / 2
+      const y_center =
+        (touch_state.initial_y_range[0] + touch_state.initial_y_range[1]) / 2
+      const y2_center =
+        (touch_state.initial_y2_range[0] + touch_state.initial_y2_range[1]) / 2
+
+      ranges.current.x = [
+        x_center - x_span / scale / 2,
+        x_center + x_span / scale / 2,
+      ]
+      ranges.current.x2 = [
+        x2_center - x2_span / scale / 2,
+        x2_center + x2_span / scale / 2,
+      ]
+      ranges.current.y = [
+        y_center - y_span / scale / 2,
+        y_center + y_span / scale / 2,
+      ]
+      ranges.current.y2 = [
+        y2_center - y2_span / scale / 2,
+        y2_center + y2_span / scale / 2,
+      ]
+    } else {
+      // Pan
+      const x_delta = pixels_to_data_delta(
+        -dx,
+        touch_state.initial_x_range,
+        chart_width,
+      )
+      const x2_delta = pixels_to_data_delta(
+        -dx,
+        touch_state.initial_x2_range,
+        chart_width,
+      )
+      const y_delta = pixels_to_data_delta(
+        dy,
+        touch_state.initial_y_range,
+        chart_height,
+      )
+      const y2_delta = pixels_to_data_delta(
+        dy,
+        touch_state.initial_y2_range,
+        chart_height,
+      )
+      ranges.current.x = pan_range(touch_state.initial_x_range, x_delta)
+      ranges.current.x2 = pan_range(touch_state.initial_x2_range, x2_delta)
+      ranges.current.y = pan_range(touch_state.initial_y_range, y_delta)
+      ranges.current.y2 = pan_range(touch_state.initial_y2_range, y2_delta)
     }
-}
-function handle_touch_end() {
-    touch_state = null;
-}
-// Legend data and handlers
-let legend_data = $derived.by(() => series.map((srs, idx) => {
-    const is_line = srs.render_mode === `line`;
-    const series_markers = srs.markers ?? DEFAULT_MARKERS;
-    const has_line = series_markers === `line` || series_markers === `line+points`;
-    const has_points = series_markers === `points` ||
-        series_markers === `line+points`;
-    const series_color = srs.color ?? (is_line ? line_state.color : bar_state.color);
-    // Get point style for symbol color (handle array or single object)
-    const first_point_style = Array.isArray(srs.point_style)
+  }
+
+  function handle_touch_end() {
+    touch_state = null
+  }
+
+  // Legend data and handlers
+  let legend_data = $derived.by<LegendItem[]>(() =>
+    series.map((srs: BarSeries<Metadata>, idx: number) => {
+      const is_line = srs.render_mode === `line`
+      const series_markers = srs.markers ?? DEFAULT_MARKERS
+      const has_line = series_markers === `line` || series_markers === `line+points`
+      const has_points = series_markers === `points` ||
+        series_markers === `line+points`
+      const series_color = srs.color ?? (is_line ? line_state.color : bar_state.color)
+
+      // Get point style for symbol color (handle array or single object)
+      const first_point_style = Array.isArray(srs.point_style)
         ? srs.point_style[0]
-        : srs.point_style;
-    const first_color_value = srs.color_values?.[0];
-    const point_color = first_color_value != null
+        : srs.point_style
+      const first_color_value = srs.color_values?.[0]
+      const point_color = first_color_value != null
         ? color_scale_fn(first_color_value)
-        : first_point_style?.fill ?? series_color;
-    if (is_line) {
+        : first_point_style?.fill ?? series_color
+
+      if (is_line) {
         // Line series: show line and/or symbol based on markers
         return {
-            series_idx: idx,
-            label: srs.label ?? `Series ${idx + 1}`,
-            visible: srs.visible ?? true,
-            legend_group: srs.legend_group,
-            display_style: {
-                ...(has_line
-                    ? {
-                        line_color: series_color,
-                        line_dash: srs.line_style?.line_dash,
-                    }
-                    : {}),
-                ...(has_points
-                    ? {
-                        symbol_type: first_point_style?.symbol_type ??
-                            DEFAULTS.scatter.symbol_type,
-                        symbol_color: point_color,
-                    }
-                    : {}),
-            },
-        };
-    }
-    // Bar series: show square symbol
-    return {
+          series_idx: idx,
+          label: srs.label ?? `Series ${idx + 1}`,
+          visible: srs.visible ?? true,
+          legend_group: srs.legend_group,
+          display_style: {
+            ...(has_line
+              ? {
+                line_color: series_color,
+                line_dash: srs.line_style?.line_dash,
+              }
+              : {}),
+            ...(has_points
+              ? {
+                symbol_type: first_point_style?.symbol_type ??
+                  DEFAULTS.scatter.symbol_type,
+                symbol_color: point_color,
+              }
+              : {}),
+          },
+        }
+      }
+      // Bar series: show square symbol
+      return {
         series_idx: idx,
         label: srs.label ?? `Series ${idx + 1}`,
         visible: srs.visible ?? true,
         legend_group: srs.legend_group,
         display_style: {
-            symbol_type: `Square`,
-            symbol_color: series_color,
+          symbol_type: `Square` as const,
+          symbol_color: series_color,
         },
-    };
-}));
-function toggle_series_visibility(series_idx) {
+      }
+    })
+  )
+
+  function toggle_series_visibility(series_idx: number) {
     if (series_idx >= 0 && series_idx < series.length) {
-        series = series.map((srs, idx) => idx === series_idx ? { ...srs, visible: !(srs.visible ?? true) } : srs);
+      series = series.map((srs, idx) =>
+        idx === series_idx ? { ...srs, visible: !(srs.visible ?? true) } : srs
+      )
     }
-}
-function toggle_group_visibility(_group_name, series_indices) {
+  }
+
+  function toggle_group_visibility(_group_name: string, series_indices: number[]) {
     // Filter to valid indices upfront (consistent with shared toggle_group_visibility)
-    const valid_indices = series_indices.filter((idx) => idx >= 0 && idx < series.length);
-    if (valid_indices.length === 0)
-        return;
-    const idx_set = new Set(valid_indices);
+    const valid_indices = series_indices.filter((idx) =>
+      idx >= 0 && idx < series.length
+    )
+    if (valid_indices.length === 0) return
+
+    const idx_set = new Set(valid_indices)
     // Check if all series in the group are currently visible
-    const all_visible = valid_indices.every((idx) => series[idx].visible ?? true);
+    const all_visible = valid_indices.every((idx) => series[idx].visible ?? true)
     // Toggle: if all visible, hide all; otherwise show all
-    const new_visibility = !all_visible;
-    series = series.map((srs, idx) => idx_set.has(idx) ? { ...srs, visible: new_visibility } : srs);
-}
-// Collect bar and line positions for legend placement
-let bar_points_for_placement = $derived.by(() => {
-    if (!width || !height || !visible_series.length)
-        return [];
-    return visible_series.flatMap((srs) => {
-        const is_line = srs.render_mode === `line`;
-        // Use original series index to look up stacked_offsets
-        const series_idx = series.indexOf(srs);
-        const series_offsets = stacked_offsets[series_idx] ?? [];
-        const use_y2 = srs.y_axis === `y2`;
-        const y_scale = use_y2 ? scales.y2 : scales.y;
-        return srs.x
-            .map((x_val, bar_idx) => {
-            const y_val = srs.y[bar_idx];
-            const base = !is_line && mode === `stacked`
-                ? (series_offsets[bar_idx] ?? 0)
-                : 0;
-            const [bar_x, bar_y] = orientation === `vertical`
-                ? [scales.x(x_val), y_scale(base + y_val)]
-                : [scales.x(base + y_val), scales.y(x_val)];
-            return { x: bar_x, y: bar_y };
+    const new_visibility = !all_visible
+    series = series.map((srs, idx) =>
+      idx_set.has(idx) ? { ...srs, visible: new_visibility } : srs
+    )
+  }
+
+  // Collect bar and line positions for legend placement
+  let bar_points_for_placement = $derived.by(() => {
+    if (!width || !height || !visible_series.length) return []
+
+    return internal_series.flatMap((srs, series_idx) => {
+      if (!(srs?.visible ?? true)) return []
+      const is_line = srs.render_mode === `line`
+      const series_offsets = stacked_offsets[series_idx] ?? []
+      const use_y2 = srs.y_axis === `y2`
+      const y_scale = use_y2 ? scales.y2 : scales.y
+      const use_x2_pl = srs.x_axis === `x2`
+      const x_scale_pl = use_x2_pl ? scales.x2 : scales.x
+      return srs.x
+        .map((x_val, bar_idx) => {
+          const y_val = srs.y[bar_idx]
+          const base = !is_line && mode === `stacked`
+            ? (series_offsets[bar_idx] ?? 0)
+            : 0
+          const [bar_x, bar_y] = orientation === `vertical`
+            ? [x_scale_pl(x_val), y_scale(base + y_val)]
+            : [x_scale_pl(base + y_val), scales.y(x_val)]
+          return { x: bar_x, y: bar_y }
         })
-            .filter(({ x, y }) => isFinite(x) && isFinite(y));
-    });
-});
-// Legend placement stability state
-let legend_element = $state();
-const legend_hover = create_hover_lock();
-const dim_tracker = create_dimension_tracker();
-let has_initial_legend_placement = $state(false);
-// Clear pending hover lock timeout on unmount
-$effect(() => () => legend_hover.cleanup());
-// Calculate best legend placement using continuous grid sampling
-let legend_placement = $derived.by(() => {
-    const should_show = show_legend !== undefined ? show_legend : series.length > 1;
-    if (!should_show || !width || !height)
-        return null;
+        .filter(({ x, y }) => isFinite(x) && isFinite(y))
+    })
+  })
+
+  // Legend placement stability state
+  let legend_element = $state<HTMLDivElement | undefined>()
+  const legend_hover = create_hover_lock()
+  const dim_tracker = create_dimension_tracker()
+  let has_initial_legend_placement = $state(false)
+
+  // Clear pending hover lock timeout on unmount
+  $effect(() => () => legend_hover.cleanup())
+
+  // Calculate best legend placement using continuous grid sampling
+  let legend_placement = $derived.by(() => {
+    const should_show = show_legend !== undefined ? show_legend : series.length > 1
+    if (!should_show || !width || !height) return null
+
     // Use measured size if available, otherwise estimate
     const legend_size = legend_element
-        ? { width: legend_element.offsetWidth, height: legend_element.offsetHeight }
-        : { width: 120, height: 60 };
+      ? { width: legend_element.offsetWidth, height: legend_element.offsetHeight }
+      : { width: 120, height: 60 }
+
     const result = compute_element_placement({
-        plot_bounds: { x: pad.l, y: pad.t, width: chart_width, height: chart_height },
-        element_size: legend_size,
-        axis_clearance: legend?.axis_clearance,
-        exclude_rects: [],
-        points: bar_points_for_placement,
-    });
-    return result;
-});
-// Tweened legend coordinates for smooth animation - create once, update target via effect
-// untrack() explicitly captures initial tween config (intentional - config set once at mount)
-const tweened_legend_coords = new Tween({ x: 0, y: 0 }, untrack(() => ({ duration: 400, ...(legend?.tween ?? {}) })));
-// Update legend position with stability checks
-$effect(() => {
-    if (!width || !height || !legend_placement)
-        return;
+      plot_bounds: { x: pad.l, y: pad.t, width: chart_width, height: chart_height },
+      element_size: legend_size,
+      axis_clearance: legend?.axis_clearance,
+      exclude_rects: [],
+      points: bar_points_for_placement,
+    })
+
+    return result
+  })
+
+  // Tweened legend coordinates for smooth animation - create once, update target via effect
+  // untrack() explicitly captures initial tween config (intentional - config set once at mount)
+  const tweened_legend_coords = new Tween(
+    { x: 0, y: 0 },
+    untrack(() => ({ duration: 400, ...(legend?.tween ?? {}) })),
+  )
+
+  // Update legend position with stability checks
+  $effect(() => {
+    if (!width || !height || !legend_placement) return
+
     // Track dimensions for resize detection
-    const dims_changed = dim_tracker.has_changed(width, height);
-    if (dims_changed)
-        dim_tracker.update(width, height);
-    const is_responsive = legend?.responsive ?? false;
+    const dims_changed = dim_tracker.has_changed(width, height)
+    if (dims_changed) dim_tracker.update(width, height)
+
+    const is_responsive = legend?.responsive ?? false
     // Only update if: resize occurred, OR (not hover-locked AND (responsive OR not yet initially placed))
     const should_update = dims_changed || (!legend_hover.is_locked.current &&
-        (is_responsive || !has_initial_legend_placement));
+      (is_responsive || !has_initial_legend_placement))
+
     if (should_update) {
-        tweened_legend_coords.set({ x: legend_placement.x, y: legend_placement.y }, 
+      tweened_legend_coords.set(
+        { x: legend_placement.x, y: legend_placement.y },
         // Skip animation on initial placement to avoid jump from (0, 0)
-        has_initial_legend_placement ? undefined : { duration: 0 });
-        // Only lock position after we have actual measured size
-        if (legend_element) {
-            has_initial_legend_placement = true;
-        }
+        has_initial_legend_placement ? undefined : { duration: 0 },
+      )
+      // Only lock position after we have actual measured size
+      if (legend_element) {
+        has_initial_legend_placement = true
+      }
     }
-});
-// Tooltip state
-let hover_info = $state(null);
-let tooltip_el = $state();
-function get_bar_data(series_idx, bar_idx, color) {
-    const srs = series[series_idx];
-    const [x, y] = [srs.x[bar_idx], srs.y[bar_idx]];
-    const [orient_x, orient_y] = orientation === `horizontal` ? [y, x] : [x, y];
+  })
+
+  // Tooltip state
+  let hover_info = $state<BarHandlerProps<Metadata> | null>(null)
+  let tooltip_el = $state<HTMLDivElement | undefined>()
+
+  function get_bar_data(
+    series_idx: number,
+    bar_idx: number,
+    color: string,
+  ): BarHandlerProps<Metadata> {
+    const srs = internal_series[series_idx]
+    const [x, y] = [srs.x[bar_idx], srs.y[bar_idx]]
+    const [orient_x, orient_y] = orientation === `horizontal` ? [y, x] : [x, y]
     const metadata = Array.isArray(srs.metadata)
-        ? srs.metadata[bar_idx]
-        : srs.metadata;
-    const label = srs.labels?.[bar_idx] ?? null;
-    const active_y_axis = srs.y_axis ?? `y1`;
-    const coords = { x, y, orient_x, orient_y, x_axis, y_axis, y2_axis };
-    return { ...coords, metadata, color, label, series_idx, bar_idx, active_y_axis };
-}
-const handle_bar_hover = (series_idx, bar_idx, color) => (event) => {
-    hovered = true;
-    hover_info = get_bar_data(series_idx, bar_idx, color);
-    change(hover_info);
-    on_bar_hover?.({ ...hover_info, event });
-};
-// Stack offsets (only for bar series in stacked mode, grouped by y-axis)
-let stacked_offsets = $derived.by(() => {
-    if (mode !== `stacked`)
-        return [];
-    const max_len = Math.max(0, ...series.map((srs) => srs.y.length));
-    const offsets = series.map(() => Array.from({ length: max_len }, () => 0));
+      ? srs.metadata[bar_idx]
+      : srs.metadata
+    const label = srs.labels?.[bar_idx] ?? null
+    const active_y_axis = srs.y_axis ?? `y1`
+    const active_x_axis = srs.x_axis ?? `x1`
+    const category_label = category_list[x]
+    const coords = {
+      x,
+      y,
+      orient_x,
+      orient_y,
+      x_axis: active_x_axis === `x2` ? x2_axis : x_axis,
+      x2_axis,
+      y_axis: active_y_axis === `y2` ? y2_axis : y_axis,
+      y2_axis,
+    }
+    return {
+      ...coords,
+      metadata,
+      color,
+      label,
+      series_idx,
+      bar_idx,
+      active_y_axis,
+      active_x_axis,
+      category_label,
+    }
+  }
+
+  // Find the point closest to the cursor on a polyline overlay (O(n) scan).
+  function find_closest_point(
+    evt: MouseEvent,
+    points: LineSeriesPoint[],
+  ): LineSeriesPoint | null {
+    const svg_el = (evt.target as Element).closest(`svg`)
+    if (!svg_el) return null
+    const rect = svg_el.getBoundingClientRect()
+    const mx = evt.clientX - rect.left
+    const my = evt.clientY - rect.top
+    let best: LineSeriesPoint | null = null
+    let best_dist = Infinity
+    for (const pt of points) {
+      const dist = (pt.x - mx) ** 2 + (pt.y - my) ** 2
+      if (dist < best_dist) {
+        best_dist = dist
+        best = pt
+      }
+    }
+    return best
+  }
+
+  const line_point_fill = (pt: LineSeriesPoint, series_color: string): string =>
+    pt.color_value != null
+      ? color_scale_fn(pt.color_value)
+      : pt.point_style?.fill ?? series_color
+
+  const handle_bar_hover =
+    (series_idx: number, bar_idx: number, color: string) => (event: MouseEvent) => {
+      hovered = true
+      hover_info = get_bar_data(series_idx, bar_idx, color)
+      change(hover_info)
+      on_bar_hover?.({ ...hover_info, event })
+    }
+
+  // Stack offsets (only for bar series in stacked mode, grouped by y-axis)
+  let stacked_offsets = $derived.by(() => {
+    if (mode !== `stacked`) return [] as number[][]
+    const max_len = Math.max(
+      0,
+      ...internal_series.map((srs) => srs.y.length),
+    )
+    const offsets = internal_series.map(() =>
+      Array.from({ length: max_len }, () => 0)
+    )
+
     // Separate accumulators for y1 and y2 axes
-    const y1_pos_acc = Array.from({ length: max_len }, () => 0);
-    const y1_neg_acc = Array.from({ length: max_len }, () => 0);
-    const y2_pos_acc = Array.from({ length: max_len }, () => 0);
-    const y2_neg_acc = Array.from({ length: max_len }, () => 0);
-    series.forEach((srs, series_idx) => {
-        if (!(srs?.visible ?? true) || srs.render_mode === `line`)
-            return;
-        const use_y2 = srs.y_axis === `y2`;
-        const pos_acc = use_y2 ? y2_pos_acc : y1_pos_acc;
-        const neg_acc = use_y2 ? y2_neg_acc : y1_neg_acc;
-        for (let bar_idx = 0; bar_idx < max_len; bar_idx++) {
-            const y_val = srs.y[bar_idx] ?? 0;
-            const acc = y_val >= 0 ? pos_acc : neg_acc;
-            offsets[series_idx][bar_idx] = acc[bar_idx];
-            acc[bar_idx] += y_val;
-        }
-    });
-    return offsets;
-});
-// Calculate group positions for grouped mode (side-by-side bars)
-let group_info = $derived.by(() => {
-    if (mode !== `grouped`)
-        return { bar_series_count: 0, bar_series_indices: [] };
-    const bar_series_indices = series
-        .map((srs, idx) => (srs?.visible ?? true) && srs.render_mode !== `line` ? idx : -1)
-        .filter((idx) => idx >= 0);
-    return { bar_series_count: bar_series_indices.length, bar_series_indices };
-});
-// Set theme-aware background when entering fullscreen
-$effect(() => {
-    set_fullscreen_bg(wrapper, fullscreen, `--barplot-fullscreen-bg`);
-});
-// State accessors for shared axis change handler
-const axis_state = {
-    get_axis: (axis) => (axis === `x` ? x_axis : axis === `y` ? y_axis : y2_axis),
+    const y1_pos_acc = Array.from({ length: max_len }, () => 0)
+    const y1_neg_acc = Array.from({ length: max_len }, () => 0)
+    const y2_pos_acc = Array.from({ length: max_len }, () => 0)
+    const y2_neg_acc = Array.from({ length: max_len }, () => 0)
+
+    internal_series.forEach((srs, series_idx) => {
+      if (!(srs?.visible ?? true) || srs.render_mode === `line`) return
+
+      const use_y2 = srs.y_axis === `y2`
+      const pos_acc = use_y2 ? y2_pos_acc : y1_pos_acc
+      const neg_acc = use_y2 ? y2_neg_acc : y1_neg_acc
+
+      for (let bar_idx = 0; bar_idx < max_len; bar_idx++) {
+        const y_val = srs.y[bar_idx] ?? 0
+        const acc = y_val >= 0 ? pos_acc : neg_acc
+        offsets[series_idx][bar_idx] = acc[bar_idx]
+        acc[bar_idx] += y_val
+      }
+    })
+    return offsets
+  })
+
+  // Calculate group positions for grouped mode (side-by-side bars)
+  let group_info = $derived.by(() => {
+    if (mode !== `grouped`) return { bar_series_count: 0, bar_series_indices: [] }
+    const bar_series_indices = internal_series
+      .map((srs, idx) =>
+        (srs?.visible ?? true) && srs.render_mode !== `line` ? idx : -1
+      )
+      .filter((idx) => idx >= 0)
+    return { bar_series_count: bar_series_indices.length, bar_series_indices }
+  })
+
+  // Set theme-aware background when entering fullscreen
+  $effect(() => {
+    set_fullscreen_bg(wrapper, fullscreen, `--barplot-fullscreen-bg`)
+  })
+
+  // State accessors for shared axis change handler
+  const axis_state: AxisChangeState<BarSeries<Metadata>> = {
+    get_axis: (axis) => {
+      if (axis === `x`) return x_axis
+      if (axis === `x2`) return x2_axis
+      if (axis === `y`) return y_axis
+      return y2_axis
+    },
     set_axis: (axis, config) => {
-        // Spread into existing state to preserve merged type structure
-        if (axis === `x`)
-            x_axis = { ...x_axis, ...config };
-        else if (axis === `y`)
-            y_axis = { ...y_axis, ...config };
-        else
-            y2_axis = { ...y2_axis, ...config };
+      // Spread into existing state to preserve merged type structure
+      if (axis === `x`) x_axis = { ...x_axis, ...config }
+      else if (axis === `x2`) x2_axis = { ...x2_axis, ...config }
+      else if (axis === `y`) y_axis = { ...y_axis, ...config }
+      else y2_axis = { ...y2_axis, ...config }
     },
     get_series: () => series,
     set_series: (new_series) => (series = new_series),
     get_loading: () => axis_loading,
     set_loading: (axis) => (axis_loading = axis),
-};
-// Create shared handler bound to this component's state
-// Using $derived so handler updates when callback props change
-const handle_axis_change = $derived(create_axis_change_handler(axis_state, data_loader, on_axis_change, on_error));
-let auto_load_attempted = false; // prevent infinite retries on failure
-// Auto-load data if series is empty but options exist (runs once)
-$effect(() => {
+  }
+
+  // Create shared handler bound to this component's state
+  // Using $derived so handler updates when callback props change
+  const handle_axis_change = $derived(create_axis_change_handler(
+    axis_state,
+    data_loader,
+    on_axis_change,
+    on_error,
+  ))
+
+  let auto_load_attempted = false // prevent infinite retries on failure
+
+  // Auto-load data if series is empty but options exist (runs once)
+  $effect(() => {
     if (series.length === 0 && data_loader && !auto_load_attempted) {
-        // Check x-axis first, then y-axis
-        if (x_axis.options?.length) {
-            auto_load_attempted = true;
-            const first_key = x_axis.selected_key ?? x_axis.options[0].key;
-            handle_axis_change(`x`, first_key).catch(() => { });
-        }
-        else if (y_axis.options?.length) {
-            auto_load_attempted = true;
-            const first_key = y_axis.selected_key ?? y_axis.options[0].key;
-            handle_axis_change(`y`, first_key).catch(() => { });
-        }
+      // Check x-axis first, then y-axis
+      if (x_axis.options?.length) {
+        auto_load_attempted = true
+        const first_key = x_axis.selected_key ?? x_axis.options[0].key
+        handle_axis_change(`x`, first_key).catch(() => {})
+      } else if (y_axis.options?.length) {
+        auto_load_attempted = true
+        const first_key = y_axis.selected_key ?? y_axis.options[0].key
+        handle_axis_change(`y`, first_key).catch(() => {})
+      }
     }
-});
+  })
 </script>
 
 {#snippet ref_lines_layer(lines: IndexedRefLine[])}
@@ -674,11 +1312,12 @@ $effect(() => {
     <ReferenceLine
       ref_line={line}
       line_idx={line.idx}
-      x_min={ranges.current.x[0]}
-      x_max={ranges.current.x[1]}
+      x_min={line.x_axis === `x2` ? ranges.current.x2[0] : ranges.current.x[0]}
+      x_max={line.x_axis === `x2` ? ranges.current.x2[1] : ranges.current.x[1]}
       y_min={line.y_axis === `y2` ? ranges.current.y2[0] : ranges.current.y[0]}
       y_max={line.y_axis === `y2` ? ranges.current.y2[1] : ranges.current.y[1]}
       x_scale={scales.x}
+      x2_scale={scales.x2}
       y_scale={scales.y}
       y2_scale={scales.y2}
       {clip_path_id}
@@ -729,6 +1368,8 @@ $effect(() => {
     <svg
       bind:this={svg_element}
       role="application"
+      aria-label={rest[`aria-label`] ??
+      ([x_axis.label, y_axis.label].filter(Boolean).join(` vs `) || `Bar chart`)}
       tabindex="0"
       onfocusin={() => (is_focused = true)}
       onfocusout={() => (is_focused = false)}
@@ -736,10 +1377,12 @@ $effect(() => {
       ondblclick={() => {
         // Reset zoom to initial ranges (undo any pan/zoom)
         ranges.current.x = [...ranges.initial.x] as [number, number]
+        ranges.current.x2 = [...ranges.initial.x2] as [number, number]
         ranges.current.y = [...ranges.initial.y] as [number, number]
         ranges.current.y2 = [...ranges.initial.y2] as [number, number]
         // Also reset axis props so future data changes recalculate auto ranges
         x_axis = { ...x_axis, range: [null, null] }
+        x2_axis = { ...x2_axis, range: [null, null] }
         y_axis = { ...y_axis, range: [null, null] }
         y2_axis = { ...y2_axis, range: [null, null] }
       }}
@@ -759,26 +1402,19 @@ $effect(() => {
       ? `grab`
       : `crosshair`}
     >
-      <!-- Zoom rectangle -->
-      {#if drag_state.start && drag_state.current && isFinite(drag_state.start.x) &&
-        isFinite(drag_state.start.y) && isFinite(drag_state.current.x) &&
-        isFinite(drag_state.current.y)}
-        {@const x = Math.min(drag_state.start.x, drag_state.current.x)}
-        {@const y = Math.min(drag_state.start.y, drag_state.current.y)}
-        {@const rect_w = Math.abs(drag_state.start.x - drag_state.current.x)}
-        {@const rect_h = Math.abs(drag_state.start.y - drag_state.current.y)}
-        <rect class="zoom-rect" {x} {y} width={rect_w} height={rect_h} />
-      {/if}
+      <ZoomRect start={drag_state.start} current={drag_state.current} />
 
       <!-- User content (custom overlays, reference lines, etc.) -->
       {@render user_content?.({
         height,
         width,
         x_scale_fn: scales.x,
+        x2_scale_fn: scales.x2,
         y_scale_fn: scales.y,
         y2_scale_fn: scales.y2,
         pad,
         x_range: ranges.current.x,
+        x2_range: ranges.current.x2,
         y_range: ranges.current.y,
         y2_range: ranges.current.y2,
         fullscreen,
@@ -833,37 +1469,106 @@ $effect(() => {
                 ? `rotate(${rotation}, ${shift_x}, ${text_y})`
                 : undefined}
               >
-                {format_value(tick, x_axis.format)}
+                {
+                  get_tick_label(
+                    tick as number,
+                    cat_axis === `x` ? effective_cat_ticks : x_axis.ticks,
+                  ) ??
+                    format_value(tick, x_axis.format)
+                }
               </text>
             </g>
           {/if}
         {/each}
         {#if x_axis.label || x_axis.options?.length}
-          {@const shift_x = x_axis.label_shift?.x ?? 0}
-          {@const shift_y = x_axis.label_shift?.y ?? 0}
-          <foreignObject
-            x={pad.l + chart_width / 2 + shift_x - AXIS_LABEL_CONTAINER.x_offset}
-            y={height - (pad.b / 3) + shift_y - AXIS_LABEL_CONTAINER.y_offset}
-            width={AXIS_LABEL_CONTAINER.width}
-            height={AXIS_LABEL_CONTAINER.height}
-            style="overflow: visible; pointer-events: none"
-          >
-            <div xmlns="http://www.w3.org/1999/xhtml" style="pointer-events: auto">
-              <InteractiveAxisLabel
-                label={x_axis.label ?? ``}
-                options={x_axis.options}
-                selected_key={x_axis.selected_key}
-                loading={axis_loading === `x`}
-                axis_type="x"
-                color={x_axis.color}
-                on_select={(key) => handle_axis_change(`x`, key)}
-                class="axis-label x-label"
-              />
-            </div>
-          </foreignObject>
+          {@const { label_shift, label = ``, options, selected_key, color } = x_axis}
+          <AxisLabel
+            x={pad.l + chart_width / 2 + (label_shift?.x ?? 0)}
+            y={height - (pad.b / 3) + (label_shift?.y ?? 0)}
+            {label}
+            {options}
+            {selected_key}
+            loading={axis_loading === `x`}
+            axis_type="x"
+            {color}
+            on_select={(key) => handle_axis_change(`x`, key)}
+          />
         {/if}
       </g>
 
+      <!-- X2-axis (Top) -->
+      <!-- Note: x2 axis is only supported for vertical orientation -->
+      {#if x2_series.length > 0 && orientation === `vertical`}
+        <g class="x2-axis">
+          <line
+            x1={pad.l}
+            x2={width - pad.r}
+            y1={pad.t}
+            y2={pad.t}
+            stroke={x2_axis.color || `var(--border-color, gray)`}
+            stroke-width="1"
+          />
+          {#each ticks.x2 as tick (tick)}
+            {@const tick_x = scales.x2(tick as number)}
+            {#if isFinite(tick_x)}
+              {@const rotation = x2_axis.tick?.label?.rotation ?? 0}
+              {@const shift_x = x2_axis.tick?.label?.shift?.x ?? 0}
+              {@const shift_y = x2_axis.tick?.label?.shift?.y ?? 0}
+              {@const inside = x2_axis.tick?.label?.inside ?? false}
+              {@const base_y = inside ? 8 : (rotation !== 0 ? -8 : -18)}
+              {@const text_y = base_y + shift_y}
+              {@const text_anchor = rotation !== 0 ? (inside ? `start` : `end`) : `middle`}
+              {@const dominant_baseline = inside ? `hanging` : `auto`}
+              <g class="tick" transform="translate({tick_x}, {pad.t})">
+                {#if display.x2_grid}
+                  <line
+                    y1="0"
+                    y2={height - pad.b - pad.t}
+                    {...DEFAULT_GRID_STYLE}
+                    {...(x2_axis.grid_style ?? {})}
+                  />
+                {/if}
+                <line
+                  y1={inside ? 5 : 0}
+                  y2={inside ? 0 : -5}
+                  stroke={x2_axis.color || `var(--border-color, gray)`}
+                  stroke-width="1"
+                />
+                <text
+                  x={shift_x}
+                  y={text_y}
+                  text-anchor={text_anchor}
+                  dominant-baseline={dominant_baseline}
+                  fill={x2_axis.color || `var(--text-color)`}
+                  transform={rotation !== 0
+                  ? `rotate(${rotation}, ${shift_x}, ${text_y})`
+                  : undefined}
+                >
+                  {
+                    get_tick_label(tick as number, x2_axis.ticks) ??
+                    format_value(tick, x2_axis.format)
+                  }
+                </text>
+              </g>
+            {/if}
+          {/each}
+          {#if x2_axis.label || x2_axis.options?.length}
+            {@const { label_shift, label = ``, options, selected_key, color } = x2_axis}
+            <AxisLabel
+              x={pad.l + chart_width / 2 + (label_shift?.x ?? 0)}
+              y={Math.max(12, pad.t - (label_shift?.y ?? 40))}
+              {label}
+              {options}
+              {selected_key}
+              loading={axis_loading === `x2`}
+              axis_type="x2"
+              {color}
+              on_select={(key) => handle_axis_change(`x2`, key)}
+            />
+          {/if}
+        </g>
+      {/if}
+
       <!-- Y-axis -->
       <g class="y-axis">
         <line
@@ -909,47 +1614,36 @@ $effect(() => {
                 ? `rotate(${rotation}, ${text_x}, ${shift_y})`
                 : undefined}
               >
-                {format_value(tick, y_axis.format)}
+                {
+                  get_tick_label(
+                    tick as number,
+                    cat_axis === `y` ? effective_cat_ticks : y_axis.ticks,
+                  ) ??
+                    format_value(tick, y_axis.format)
+                }
               </text>
             </g>
           {/if}
         {/each}
         {#if y_axis.label || y_axis.options?.length}
-          {@const max_y_tick_width = Math.max(
-          0,
-          ...ticks.y.map((tick) =>
-            measure_text_width(
-              format_value(tick, y_axis.format),
-              `12px sans-serif`,
-            )
-          ),
-        )}
-          {@const shift_x = y_axis.label_shift?.x ?? 0}
-          {@const shift_y = y_axis.label_shift?.y ?? 0}
-          {@const y_label_x = Math.max(12, pad.l - max_y_tick_width - LABEL_GAP_DEFAULT) +
-          shift_x}
-          {@const y_label_y = pad.t + chart_height / 2 + shift_y}
-          <foreignObject
-            x={y_label_x - AXIS_LABEL_CONTAINER.x_offset}
-            y={y_label_y - AXIS_LABEL_CONTAINER.y_offset}
-            width={AXIS_LABEL_CONTAINER.width}
-            height={AXIS_LABEL_CONTAINER.height}
-            style="overflow: visible; pointer-events: none"
-            transform="rotate(-90, {y_label_x}, {y_label_y})"
-          >
-            <div xmlns="http://www.w3.org/1999/xhtml" style="pointer-events: auto">
-              <InteractiveAxisLabel
-                label={y_axis.label ?? ``}
-                options={y_axis.options}
-                selected_key={y_axis.selected_key}
-                loading={axis_loading === `y`}
-                axis_type="y"
-                color={y_axis.color}
-                on_select={(key) => handle_axis_change(`y`, key)}
-                class="axis-label y-label"
-              />
-            </div>
-          </foreignObject>
+          {@const { label_shift, label = ``, options, selected_key, color, tick } = y_axis}
+          {@const y_inside = tick?.label?.inside ?? false}
+          <AxisLabel
+            x={Math.max(
+              12,
+              pad.l - (y_inside ? 0 : tick_label_widths.y_max) - LABEL_GAP_DEFAULT,
+            ) +
+              (label_shift?.x ?? 0)}
+            y={pad.t + chart_height / 2 + (label_shift?.y ?? 0)}
+            rotate
+            {label}
+            {options}
+            {selected_key}
+            loading={axis_loading === `y`}
+            axis_type="y"
+            {color}
+            on_select={(key) => handle_axis_change(`y`, key)}
+          />
         {/if}
       </g>
 
@@ -999,51 +1693,33 @@ $effect(() => {
                   ? `rotate(${rotation}, ${shift_x}, ${shift_y})`
                   : undefined}
                 >
-                  {format_value(tick, y2_axis.format)}
+                  {
+                    get_tick_label(tick as number, y2_axis.ticks) ??
+                    format_value(tick, y2_axis.format)
+                  }
                 </text>
               </g>
             {/if}
           {/each}
           {#if y2_axis.label || y2_axis.options?.length}
-            {@const max_y2_tick_width = Math.max(
-          0,
-          ...ticks.y2.map((tick) =>
-            measure_text_width(
-              format_value(tick, y2_axis.format),
-              `12px sans-serif`,
-            )
-          ),
-        )}
-            {@const shift_x = y2_axis.label_shift?.x ?? 0}
-            {@const shift_y = y2_axis.label_shift?.y ?? 0}
-            {@const inside = y2_axis.tick?.label?.inside ?? false}
-            {@const tick_shift = inside ? 0 : (y2_axis.tick?.label?.shift?.x ?? 0) + 8}
-            {@const tick_width_contribution = inside ? 0 : max_y2_tick_width}
-            {@const y2_label_x = width - pad.r + tick_shift + tick_width_contribution +
-          LABEL_GAP_DEFAULT +
-          shift_x}
-            {@const y2_label_y = pad.t + chart_height / 2 + shift_y}
-            <foreignObject
-              x={y2_label_x - AXIS_LABEL_CONTAINER.x_offset}
-              y={y2_label_y - AXIS_LABEL_CONTAINER.y_offset}
-              width={AXIS_LABEL_CONTAINER.width}
-              height={AXIS_LABEL_CONTAINER.height}
-              style="overflow: visible; pointer-events: none"
-              transform="rotate(-90, {y2_label_x}, {y2_label_y})"
-            >
-              <div xmlns="http://www.w3.org/1999/xhtml" style="pointer-events: auto">
-                <InteractiveAxisLabel
-                  label={y2_axis.label ?? ``}
-                  options={y2_axis.options}
-                  selected_key={y2_axis.selected_key}
-                  loading={axis_loading === `y2`}
-                  axis_type="y2"
-                  color={y2_axis.color}
-                  on_select={(key) => handle_axis_change(`y2`, key)}
-                  class="axis-label y2-label"
-                />
-              </div>
-            </foreignObject>
+            {@const { label_shift, label = ``, options, selected_key, color, tick } =
+          y2_axis}
+            {@const inside = tick?.label?.inside ?? false}
+            {@const tick_shift = inside ? 0 : (tick?.label?.shift?.x ?? 0) + 8}
+            {@const tick_width_contribution = inside ? 0 : tick_label_widths.y2_max}
+            <AxisLabel
+              x={width - pad.r + tick_shift + tick_width_contribution +
+              LABEL_GAP_DEFAULT + (label_shift?.x ?? 0)}
+              y={pad.t + chart_height / 2 + (label_shift?.y ?? 0)}
+              rotate
+              {label}
+              {options}
+              {selected_key}
+              loading={axis_loading === `y2`}
+              axis_type="y2"
+              {color}
+              on_select={(key) => handle_axis_change(`y2`, key)}
+            />
           {/if}
         </g>
       {/if}
@@ -1057,43 +1733,34 @@ $effect(() => {
 
       <!-- Clipped content: zero lines, bars, and lines -->
       <g clip-path="url(#{clip_path_id})">
-        <!-- Zero lines (shown for linear and arcsinh scales, not log) -->
-        {#if display.x_zero_line &&
-          get_scale_type_name(x_axis.scale_type) !== `log` &&
-          ranges.current.x[0] <= 0 && ranges.current.x[1] >= 0}
-          {@const zx = scales.x(0)}
-          {#if isFinite(zx)}
-            <line class="zero-line" x1={zx} x2={zx} y1={pad.t} y2={height - pad.b} />
-          {/if}
-        {/if}
-        {#if display.y_zero_line &&
-          get_scale_type_name(y_axis.scale_type) !== `log` &&
-          ranges.current.y[0] <= 0 && ranges.current.y[1] >= 0}
-          {@const zy = scales.y(0)}
-          {#if isFinite(zy)}
-            <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zy} y2={zy} />
-          {/if}
-        {/if}
-        {#if display.y_zero_line && y2_series.length > 0 &&
-          get_scale_type_name(y2_axis.scale_type) !== `log` &&
-          ranges.current.y2[0] <= 0 && ranges.current.y2[1] >= 0}
-          {@const zero_y2 = scales.y2(0)}
-          {#if isFinite(zero_y2)}
-            <line
-              class="zero-line"
-              x1={pad.l}
-              x2={width - pad.r}
-              y1={zero_y2}
-              y2={zero_y2}
-            />
-          {/if}
-        {/if}
+        <ZeroLines
+          {display}
+          x_scale_fn={scales.x}
+          x2_scale_fn={scales.x2}
+          y_scale_fn={scales.y}
+          y2_scale_fn={scales.y2}
+          x_range={ranges.current.x}
+          x2_range={ranges.current.x2}
+          y_range={ranges.current.y}
+          y2_range={ranges.current.y2}
+          x_scale_type={x_axis.scale_type}
+          x2_scale_type={x2_axis.scale_type}
+          y_scale_type={y_axis.scale_type}
+          y2_scale_type={y2_axis.scale_type}
+          x_is_time={x_axis.format?.startsWith(`%`) ?? false}
+          x2_is_time={x2_axis.format?.startsWith(`%`) ?? false}
+          has_x2={x2_series.length > 0}
+          has_y2={y2_series.length > 0}
+          {width}
+          {height}
+          {pad}
+        />
 
         <!-- Reference lines: below lines -->
         {@render ref_lines_layer(ref_lines_by_z.below_lines)}
 
         <!-- Bars and Lines -->
-        {#each series as srs, series_idx (srs?.id ?? series_idx)}
+        {#each internal_series as srs, series_idx (srs?.id ?? series_idx)}
           {#if srs?.visible ?? true}
             {@const is_line = srs.render_mode === `line`}
             <g
@@ -1107,6 +1774,8 @@ $effect(() => {
                 {@const line_dash = srs.line_style?.line_dash ?? `none`}
                 {@const use_y2 = srs.y_axis === `y2`}
                 {@const y_scale = use_y2 ? scales.y2 : scales.y}
+                {@const use_x2 = srs.x_axis === `x2`}
+                {@const x_scale = use_x2 ? scales.x2 : scales.x}
                 {@const series_markers = srs.markers ?? DEFAULT_MARKERS}
                 {@const show_line = series_markers === `line` ||
             series_markers === `line+points`}
@@ -1116,8 +1785,8 @@ $effect(() => {
             const y_val = srs.y[idx]
             // Lines don't stack - they show absolute values (useful for totals/trends)
             const plot_x = orientation === `vertical`
-              ? scales.x(x_val)
-              : scales.x(y_val)
+              ? x_scale(x_val)
+              : x_scale(y_val)
             const plot_y = orientation === `vertical`
               ? y_scale(y_val)
               : scales.y(x_val)
@@ -1148,9 +1817,12 @@ $effect(() => {
               point_idx: idx,
             } as LineSeriesPoint
           }).filter((pt) => isFinite(pt.x) && isFinite(pt.y))}
-                {#if show_line && points.length > 1}
+                {@const polyline_str = show_line && points.length > 1
+            ? points.map((pt) => `${pt.x},${pt.y}`).join(` `)
+            : ``}
+                {#if polyline_str}
                   <polyline
-                    points={points.map((pt) => `${pt.x},${pt.y}`).join(` `)}
+                    points={polyline_str}
                     fill="none"
                     stroke={color}
                     stroke-width={stroke_width}
@@ -1159,41 +1831,58 @@ $effect(() => {
                     stroke-linecap="round"
                   />
                 {/if}
-                <!-- Add invisible wider line for easier hovering (only if no points shown) -->
-                {#if show_line && !show_points && points.length > 1 &&
-            (on_bar_hover || on_bar_click)}
+                {#if polyline_str && !show_points && (on_bar_hover || on_bar_click)}
+                  <!-- svelte-ignore a11y_no_static_element_interactions -->
+                  <!-- svelte-ignore a11y_click_events_have_key_events -->
                   <polyline
-                    points={points.map((pt) => `${pt.x},${pt.y}`).join(` `)}
+                    points={polyline_str}
                     fill="none"
                     stroke="transparent"
                     stroke-width={Math.max(10, stroke_width * 3)}
                     stroke-linejoin="round"
                     stroke-linecap="round"
                     style:cursor={on_bar_click ? `pointer` : undefined}
+                    onmousemove={(evt) => {
+                      const pt = find_closest_point(evt, points)
+                      if (!pt) return
+                      hovered = true
+                      const fill = line_point_fill(pt, color)
+                      hover_info = get_bar_data(series_idx, pt.idx, fill)
+                      change(hover_info)
+                      on_bar_hover?.({ ...hover_info!, event: evt })
+                    }}
+                    onmouseleave={() => {
+                      change(null)
+                      hover_info = null
+                      on_bar_hover?.(null)
+                    }}
+                    onclick={(evt) => {
+                      const pt = find_closest_point(evt, points)
+                      if (!pt) return
+                      const fill = line_point_fill(pt, color)
+                      const bar_data = get_bar_data(series_idx, pt.idx, fill)
+                      on_bar_click?.({ ...bar_data, event: evt })
+                    }}
                   />
                 {/if}
                 {#if show_points}
                   {@const clickable = on_bar_click || on_point_click}
-                  {@const get_pt = (evt: Event) =>
-            points.find((pt) =>
-              pt.idx ===
-                parseInt(
-                  (evt.target as Element)?.closest(`[data-bar-idx]`)
-                    ?.getAttribute(`data-bar-idx`) ?? ``,
-                  10,
-                )
-            )}
-                  {@const fill = (pt: LineSeriesPoint) =>
-            pt.color_value != null
-              ? color_scale_fn(pt.color_value)
-              : pt.point_style?.fill ?? color}
+                  {@const get_pt = (evt: Event) => {
+            const attr = evt.target instanceof Element
+              ? evt.target.closest(`[data-bar-idx]`)?.getAttribute(
+                `data-bar-idx`,
+              )
+              : null
+            return points.find((pt) => pt.idx === parseInt(attr ?? ``, 10))
+          }}
                   {@const set_hover = (
             pt: LineSeriesPoint | null,
             evt: MouseEvent | FocusEvent,
           ) => {
             if (pt) {
               hovered = true
-              hover_info = get_bar_data(series_idx, pt.idx, fill(pt))
+              const fill = line_point_fill(pt, color)
+              hover_info = get_bar_data(series_idx, pt.idx, fill)
               change(hover_info)
             } else {
               change(null)
@@ -1208,13 +1897,15 @@ $effect(() => {
             pt: LineSeriesPoint,
             evt: MouseEvent | KeyboardEvent,
           ) => {
-            const bar_data = get_bar_data(series_idx, pt.idx, fill(pt))
+            const fill = line_point_fill(pt, color)
+            const bar_data = get_bar_data(series_idx, pt.idx, fill)
             on_bar_click?.({ ...bar_data, event: evt })
             on_point_click?.({ ...bar_data, event: evt, point: pt })
           }}
                   {@const leaving = (evt: MouseEvent | FocusEvent) =>
-            (evt.relatedTarget as Element)?.closest(`.line-points`) !==
-              evt.currentTarget}
+            (evt.relatedTarget instanceof Element
+              ? evt.relatedTarget.closest(`.line-points`)
+              : null) !== evt.currentTarget}
                   <!-- svelte-ignore a11y_no_noninteractive_element_interactions, a11y_mouse_events_have_key_events -->
                   <g
                     class="line-points"
@@ -1247,7 +1938,7 @@ $effect(() => {
                   >
                     {#each points as pt (pt.idx)}
                       {@const sty = pt.point_style}
-                      {@const fl = fill(pt)}
+                      {@const fl = line_point_fill(pt, color)}
                       {@const rad = pt.size_value != null
               ? size_scale_fn(pt.size_value)
               : sty?.radius ?? 4}
@@ -1306,9 +1997,11 @@ $effect(() => {
                   {@const val = y_val}
                   {@const use_y2 = srs.y_axis === `y2`}
                   {@const y_scale = use_y2 ? scales.y2 : scales.y}
+                  {@const use_x2_bar = srs.x_axis === `x2`}
+                  {@const x_scale_bar = use_x2_bar ? scales.x2 : scales.x}
                   {@const [cat_scale, val_scale] = is_vertical
-            ? [scales.x, y_scale]
-            : [scales.y, scales.x]}
+            ? [x_scale_bar, y_scale]
+            : [scales.y, x_scale_bar]}
                   {@const c0 = cat_scale(cat_val + group_offset - half)}
                   {@const c1 = cat_scale(cat_val + group_offset + half)}
                   {@const v0 = val_scale(base)}
@@ -1405,7 +2098,9 @@ $effect(() => {
     {/if}
 
     {#if hover_info && hovered}
-      {@const cx = scales.x(hover_info.orient_x)}
+      {@const cx = (hover_info.active_x_axis === `x2` ? scales.x2 : scales.x)(
+      hover_info.orient_x,
+    )}
       {@const cy = (hover_info.active_y_axis === `y2` ? scales.y2 : scales.y)(
       hover_info.orient_y,
     )}
@@ -1418,7 +2113,6 @@ $effect(() => {
       height,
       { offset_x: 10, offset_y: 5 },
     )}
-      {@const active_y_config = hover_info.active_y_axis === `y2` ? y2_axis : y_axis}
       <PlotTooltip
         x={tooltip_pos.x}
         y={tooltip_pos.y}
@@ -1429,14 +2123,20 @@ $effect(() => {
         {#if tooltip}
           {@render tooltip({ ...hover_info, fullscreen })}
         {:else}
+          {@const series_label = series[hover_info.series_idx]?.label}
+          {#if series.length > 1 && series_label}
+            <div><strong>{series_label}</strong></div>
+          {/if}
           <div>
-            {@html x_axis.label || `x`}: {
-              format_value(hover_info.orient_x, x_axis.format || `.3~s`)
+            {@html sanitize_html(hover_info.x_axis.label || `x`)}: {
+              (cat_axis === `x` ? hover_info.category_label : undefined) ??
+              format_value(hover_info.orient_x, hover_info.x_axis.format || `.3~s`)
             }
           </div>
           <div>
-            {@html active_y_config.label || `y`}: {
-              format_value(hover_info.orient_y, active_y_config.format || `.3~s`)
+            {@html sanitize_html(hover_info.y_axis.label || `y`)}: {
+              (cat_axis === `y` ? hover_info.category_label : undefined) ??
+              format_value(hover_info.orient_y, hover_info.y_axis.format || `.3~s`)
             }
           </div>
         {/if}
@@ -1447,7 +2147,7 @@ $effect(() => {
       <BarPlotControls
         toggle_props={{
           ...controls_toggle_props,
-          style: `--ctrl-btn-right: var(--fullscreen-btn-offset, 36px); top: 4px; ${
+          style: `--ctrl-btn-right: var(--fullscreen-btn-offset, 30px); ${
             controls_toggle_props?.style ?? ``
           }`,
         }}
@@ -1457,12 +2157,16 @@ $effect(() => {
         bind:orientation
         bind:mode
         bind:x_axis
+        bind:x2_axis
         bind:y_axis
         bind:y2_axis
         bind:display
         auto_x_range={auto_ranges.x as Vec2}
+        auto_x2_range={auto_ranges.x2 as Vec2}
         auto_y_range={auto_ranges.y as Vec2}
         auto_y2_range={auto_ranges.y2 as Vec2}
+        has_x2_points={x2_series.length > 0}
+        has_y2_points={y2_series.length > 0}
         children={controls_extra}
       />
     {/if}
@@ -1542,22 +2246,11 @@ $effect(() => {
     border: var(--barplot-dragover-border, var(--dragover-border));
     background-color: var(--barplot-dragover-bg, var(--dragover-bg));
   }
-  g:is(.x-axis, .y-axis, .y2-axis) .tick text {
+  g:is(.x-axis, .x2-axis, .y-axis, .y2-axis) .tick text {
     font-size: var(--tick-font-size, 0.8em);
   }
-  .zoom-rect {
-    fill: var(--barplot-zoom-rect-fill, rgba(100, 100, 255, 0.2));
-    stroke: var(--barplot-zoom-rect-stroke, rgba(100, 100, 255, 0.8));
-    stroke-width: var(--barplot-zoom-rect-stroke-width, 1);
-    pointer-events: none;
-  }
   .bar-label {
     fill: var(--text-color);
     font-size: 11px;
   }
-  .zero-line {
-    stroke: var(--barplot-zero-line-color, light-dark(black, white));
-    stroke-width: var(--barplot-zero-line-width, 1);
-    opacity: var(--barplot-zero-line-opacity, 0.3);
-  }
 </style>