matterviz 0.1.12 → 0.1.13

package/dist/plot/BarPlot.svelte

@@ -1,100 +1,143 @@
-<script lang="ts">import { DraggablePane } from '..';
-import { find_best_plot_area, PlotLegend } from './';
-import { format_value } from './formatting';
+<script lang="ts">import { format_value } from '../labels';
+import { BarPlotControls, DEFAULT_GRID_STYLE, find_best_plot_area, PlotLegend, } from './';
 import { get_relative_coords } from './interactions';
 import { create_scale, generate_ticks, get_nice_data_range } from './scales';
+import { DEFAULTS } from '../settings';
 import { SvelteMap } from 'svelte/reactivity';
-import BarPlotControls from './BarPlotControls.svelte';
 import { calc_auto_padding, measure_text_width } from './layout';
-let { series = $bindable([]), orientation = $bindable(`vertical`), mode = $bindable(`overlay`), x_lim = [null, null], y_lim = [null, null], x_range, y_range, range_padding = 0.05, x_label = $bindable(``), x_label_shift = $bindable({ x: 0, y: 0 }), y_label = $bindable(``), y_label_shift = $bindable({ x: 0, y: 0 }), x_format = $bindable(``), y_format = $bindable(``), x_ticks = $bindable(8), y_ticks = $bindable(6), x_grid = $bindable(true), y_grid = $bindable(true), show_zero_lines = $bindable(true), legend = {}, padding = { t: 10, b: 60, l: 60, r: 30 }, default_bar_color = `var(--bar-color, #4682b4)`, tooltip, hovered = $bindable(false), change = () => { }, on_bar_click, on_bar_hover, show_controls = $bindable(true), controls_open = $bindable(false), plot_controls, controls_toggle_props, children, ...rest } = $props();
+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 = $bindable({}), line = $bindable({}), tooltip, user_content, hovered = $bindable(false), change = () => { }, on_bar_click, on_bar_hover, show_controls = $bindable(true), controls_open = $bindable(false), controls_toggle_props, controls_pane_props, children, ...rest } = $props();
+// Initialize bar and line styles with defaults (runs once)
+bar = { ...DEFAULTS.bar.bar, ...bar };
+line = { ...DEFAULTS.bar.line, ...line };
+y2_axis = {
+    format: ``,
+    scale_type: `linear`,
+    ticks: 5,
+    label_shift: { y: 60 },
+    tick_label_shift: { x: 8, y: 0 },
+    range: [null, null],
+    ...y2_axis,
+};
 let [width, height] = $state([0, 0]);
 let svg_element = $state(null);
-let clip_path_id = `chart-clip-${Math.random().toString(36).slice(2)}`;
+let clip_path_id = `chart-clip-${crypto?.randomUUID?.()}`;
 // Compute auto ranges from visible series
-let visible_series = $derived(series.filter((s) => s?.visible ?? true));
+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(() => {
-    let all_points = visible_series.flatMap((s) => s.x.map((x_val, idx) => ({ x: x_val, y: s.y[idx] })));
-    // In stacked mode, calculate stacked totals for accurate range
-    if (mode === `stacked`) {
-        const stacked_totals = new SvelteMap();
-        // Only include visible bar series (not lines) in stacking
-        visible_series
-            .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)
-        all_points = [
-            ...Array.from(stacked_totals).flatMap(([x_val, { pos, neg }]) => [
-                ...(pos > 0 ? [{ x: x_val, y: pos }] : []),
-                ...(neg < 0 ? [{ x: x_val, y: neg }] : []),
-            ]),
-            ...visible_series
-                .filter((srs) => srs.render_mode === `line`)
-                .flatMap((srs) => srs.x.map((x_val, idx) => ({ x: x_val, y: srs.y[idx] }))),
-        ];
-    }
-    if (!all_points.length) {
-        return { x: [0, 1], y: [0, 1] };
-    }
-    // Compute data-driven ranges first (categories from x, magnitudes from y)
-    const x_range = get_nice_data_range(all_points, (p) => p.x, x_lim, `linear`, range_padding, x_format?.startsWith(`%`) || false);
-    let y_range = get_nice_data_range(all_points, (p) => p.y, y_lim, `linear`, range_padding, false);
-    // For bar plots, ensure the value axis starts at 0 unless there are negative values
-    // This prevents bars from starting at arbitrary values
-    const has_negative = all_points.some((p) => p.y < 0);
-    const has_positive = all_points.some((p) => p.y > 0);
-    // Only adjust if no explicit y_lim is set
-    if (!y_lim?.[0] && !y_lim?.[1]) {
-        if (has_positive && !has_negative) {
-            // All positive/zero values: always start from 0
-            y_range = [0, y_range[1]];
+    // 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] }))),
+            ];
         }
-        else if (has_negative && !has_positive) {
-            // All negative values: end at 0
-            y_range = [y_range[0], 0];
+        if (!points.length) {
+            return [0, 1];
         }
-        // Mixed positive/negative: keep natural range (will include 0)
-    }
+        let y_range = get_nice_data_range(points, (p) => p.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 scales
+        if (scale_type === `linear`) {
+            const has_negative = points.some((p) => p.y < 0);
+            const has_positive = points.some((p) => p.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((s) => s.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, (p) => p.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`);
     // Map data ranges to axis ranges depending on orientation
     return orientation === `horizontal`
-        ? ({ x: y_range, y: x_range })
-        : ({ x: x_range, y: y_range });
+        ? ({ 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] },
-    current: { x: [0, 1], y: [0, 1] },
+    initial: { x: [0, 1], y: [0, 1], y2: [0, 1] },
+    current: { x: [0, 1], y: [0, 1], y2: [0, 1] },
 });
 $effect(() => {
     const new_x = [
-        x_range?.[0] ?? auto_ranges.x[0],
-        x_range?.[1] ?? auto_ranges.x[1],
+        x_axis.range?.[0] ?? auto_ranges.x[0],
+        x_axis.range?.[1] ?? auto_ranges.x[1],
     ];
     const new_y = [
-        y_range?.[0] ?? auto_ranges.y[0],
-        y_range?.[1] ?? auto_ranges.y[1],
+        y_axis.range?.[0] ?? auto_ranges.y[0],
+        y_axis.range?.[1] ?? auto_ranges.y[1],
     ];
-    ranges = {
-        initial: { x: new_x, y: new_y },
-        current: { x: new_x, y: new_y },
-    };
+    const new_y2 = [
+        y2_axis.range?.[0] ?? auto_ranges.y2[0],
+        y2_axis.range?.[1] ?? auto_ranges.y2[1],
+    ];
+    // Only update if ranges actually changed
+    if (ranges.current.x[0] !== new_x[0] ||
+        ranges.current.x[1] !== new_x[1] ||
+        ranges.current.y[0] !== new_y[0] ||
+        ranges.current.y[1] !== new_y[1] ||
+        ranges.current.y2[0] !== new_y2[0] ||
+        ranges.current.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 },
+        };
+    }
 });
 // Layout: dynamic padding based on tick label widths
 const default_padding = { t: 20, b: 60, l: 60, r: 20 };
 let pad = $state({ ...default_padding, ...padding });
 // Update padding when format or ticks change, but prevent infinite loop
 $effect(() => {
-    const base_pad = { ...default_padding, ...padding };
     const new_pad = width && height && ticks.y.length
-        ? calc_auto_padding({ base_padding: base_pad, y_ticks: ticks.y, y_format })
-        : base_pad;
+        ? calc_auto_padding({
+            padding,
+            default_padding,
+            y_axis: { ...y_axis, tick_values: ticks.y },
+            y2_axis: { ...y2_axis, tick_values: ticks.y2 },
+        })
+        : { ...default_padding, ...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`)));
+        new_pad.r = Math.max(new_pad.r, 10 + y2_tick_width + (y2_axis.label ? 40 : 0));
+    }
     // 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)
@@ -102,20 +145,35 @@ $effect(() => {
 });
 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 (linear only for now)
+// Scales
 let scales = $derived({
-    x: create_scale(`linear`, ranges.current.x, [pad.l, width - pad.r]),
-    y: create_scale(`linear`, ranges.current.y, [height - pad.b, pad.t]),
+    x: create_scale(x_axis.scale_type ?? `linear`, ranges.current.x, [
+        pad.l,
+        width - pad.r,
+    ]),
+    y: create_scale(y_axis.scale_type ?? `linear`, ranges.current.y, [
+        height - pad.b,
+        pad.t,
+    ]),
+    y2: create_scale(y2_axis.scale_type ?? `linear`, ranges.current.y2, [
+        height - pad.b,
+        pad.t,
+    ]),
 });
 // Ticks
 let ticks = $derived({
     x: width && height
-        ? generate_ticks(ranges.current.x, `linear`, x_ticks, scales.x, {
+        ? 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, `linear`, y_ticks, scales.y, {
+        ? 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,
         })
         : [],
@@ -132,15 +190,30 @@ const on_window_mouse_move = (evt) => {
 };
 const on_window_mouse_up = () => {
     if (drag_state.start && drag_state.current) {
-        const x1 = scales.x.invert(drag_state.start.x);
-        const x2 = scales.x.invert(drag_state.current.x);
+        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);
-        if (dx > 5 && dy > 5 && typeof x1 === `number` && typeof x2 === `number`) {
-            ranges.current.x = [Math.min(x1, x2), Math.max(x1, x2)];
-            ranges.current.y = [Math.min(y1, y2), Math.max(y1, y2)];
+        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)] };
         }
     }
     drag_state = { start: null, current: null, bounds: null };
@@ -162,7 +235,10 @@ function handle_mouse_down(evt) {
     evt.preventDefault();
 }
 function handle_double_click() {
-    ranges.current = { x: [...ranges.initial.x], y: [...ranges.initial.y] };
+    // Clear axis ranges to reset to auto ranges
+    x_axis = { ...x_axis, range: undefined };
+    y_axis = { ...y_axis, range: undefined };
+    y2_axis = { ...y2_axis, range: undefined };
 }
 // Legend data and handlers
 let legend_data = $derived.by(() => series.map((srs, idx) => ({
@@ -171,12 +247,12 @@ let legend_data = $derived.by(() => series.map((srs, idx) => ({
     visible: srs.visible ?? true,
     display_style: srs.render_mode === `line`
         ? {
-            line_color: srs.color ?? default_bar_color,
+            line_color: srs.color ?? line.color,
             line_dash: srs.line_style?.line_dash,
         }
         : {
             symbol_type: `Square`,
-            symbol_color: srs.color ?? default_bar_color,
+            symbol_color: srs.color ?? bar.color,
         },
 })));
 function toggle_series_visibility(series_idx) {
@@ -193,34 +269,43 @@ let bar_points_for_placement = $derived.by(() => {
         // 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), scales.y(base + y_val)]
+                ? [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 };
         }).filter((p) => isFinite(p.x) && isFinite(p.y));
     });
 });
 // Calculate best legend placement
-let legend_placement = $derived.by(() => series.length > 1 && width && height
-    ? find_best_plot_area(bar_points_for_placement, {
-        plot_width: chart_width,
-        plot_height: chart_height,
-        padding: pad,
-        margin: 10,
-        legend_size: { width: 120, height: 60 },
-    })
-    : null);
+let legend_placement = $derived.by(() => {
+    const should_show = show_legend !== undefined ? show_legend : series.length > 1;
+    return should_show && width && height
+        ? find_best_plot_area(bar_points_for_placement, {
+            plot_width: chart_width,
+            plot_height: chart_height,
+            padding: pad,
+            margin: 10,
+            legend_size: { width: 120, height: 60 },
+        })
+        : null;
+});
 // Tooltip state
 let hover_info = $state(null);
 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];
+    const metadata = Array.isArray(srs.metadata)
+        ? srs.metadata[bar_idx]
+        : srs.metadata;
+    const label = srs.labels?.[bar_idx] ?? null;
     return {
         x,
         y,
@@ -228,9 +313,10 @@ function get_bar_data(series_idx, bar_idx, color) {
         orient_y,
         series_idx,
         bar_idx,
-        label: srs.labels?.[bar_idx] ?? null,
-        metadata: Array.isArray(srs.metadata) ? srs.metadata[bar_idx] : srs.metadata,
+        metadata,
         color,
+        label,
+        y_axis: srs.y_axis ?? `y1`,
     };
 }
 const handle_bar_hover = (series_idx, bar_idx, color) => (event) => {
@@ -239,17 +325,23 @@ const handle_bar_hover = (series_idx, bar_idx, color) => (event) => {
     change(hover_info);
     on_bar_hover?.({ ...hover_info, event });
 };
-// Stack offsets (only for bar series in stacked mode)
+// 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((s) => s.y.length));
+    const max_len = Math.max(0, ...series.map((srs) => srs.y.length));
     const offsets = series.map(() => Array.from({ length: max_len }, () => 0));
-    const pos_acc = Array.from({ length: max_len }, () => 0);
-    const neg_acc = 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;
@@ -292,6 +384,228 @@ let group_info = $derived.by(() => {
       tabindex="0"
       aria-label="Interactive bar plot with zoom and tooltip"
     >
+      <!-- Zoom rectangle -->
+      {#if drag_state.start && drag_state.current}
+        {@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}
+
+      <!-- User content (custom overlays, reference lines, etc.) -->
+      {@render user_content?.({
+        height,
+        width,
+        x_scale_fn: scales.x,
+        y_scale_fn: scales.y,
+        y2_scale_fn: scales.y2,
+        pad,
+        x_range: ranges.current.x,
+        y_range: ranges.current.y,
+        y2_range: ranges.current.y2,
+      })}
+
+      <!-- X-axis -->
+      <g class="x-axis">
+        <line
+          x1={pad.l}
+          x2={width - pad.r}
+          y1={height - pad.b}
+          y2={height - pad.b}
+          stroke={x_axis.color || `var(--border-color, gray)`}
+          stroke-width="1"
+        />
+        {#each ticks.x as tick (tick)}
+          {@const tick_x = scales.x(tick as number)}
+          {#if isFinite(tick_x)}
+            {@const rotation = x_axis.tick_rotation ?? 0}
+            {@const shift_x = x_axis.tick_label_shift?.x ?? 0}
+            {@const shift_y = x_axis.tick_label_shift?.y ?? 0}
+            {@const text_y = rotation !== 0 ? 8 + shift_y : 18 + shift_y}
+            {@const text_anchor = rotation !== 0 ? `start` : `middle`}
+            <g class="tick" transform="translate({tick_x}, {height - pad.b})">
+              {#if display.x_grid}
+                <line
+                  y1={-(height - pad.b - pad.t)}
+                  y2="0"
+                  {...DEFAULT_GRID_STYLE}
+                  {...(x_axis.grid_style ?? {})}
+                />
+              {/if}
+              <line
+                y1="0"
+                y2="5"
+                stroke={x_axis.color || `var(--border-color, gray)`}
+                stroke-width="1"
+              />
+              <text
+                x={shift_x}
+                y={text_y}
+                text-anchor={text_anchor}
+                fill={x_axis.color || `var(--text-color)`}
+                transform={rotation !== 0
+                ? `rotate(${rotation}, ${shift_x}, ${text_y})`
+                : undefined}
+              >
+                {format_value(tick, x_axis.format)}
+              </text>
+            </g>
+          {/if}
+        {/each}
+        {#if x_axis.label}
+          {@const shift_x = x_axis.label_shift?.x ?? 0}
+          {@const shift_y = x_axis.label_shift?.y ?? 0}
+          <text
+            x={pad.l + chart_width / 2 + shift_x}
+            y={height - (pad.b / 3) + shift_y}
+            text-anchor="middle"
+            fill={x_axis.color || `var(--text-color)`}
+          >
+            {@html x_axis.label}
+          </text>
+        {/if}
+      </g>
+
+      <!-- Y-axis -->
+      <g class="y-axis">
+        <line
+          x1={pad.l}
+          x2={pad.l}
+          y1={pad.t}
+          y2={height - pad.b}
+          stroke={y_axis.color || `var(--border-color, gray)`}
+          stroke-width="1"
+        />
+        {#each ticks.y as tick (tick)}
+          {@const tick_y = scales.y(tick as number)}
+          {#if isFinite(tick_y)}
+            {@const rotation = y_axis.tick_rotation ?? 0}
+            {@const shift_x = y_axis.tick_label_shift?.x ?? 0}
+            {@const shift_y = y_axis.tick_label_shift?.y ?? 0}
+            {@const text_x = -10 + shift_x}
+            <g class="tick" transform="translate({pad.l}, {tick_y})">
+              {#if display.y_grid}
+                <line
+                  x1="0"
+                  x2={width - pad.l - pad.r}
+                  {...DEFAULT_GRID_STYLE}
+                  {...(y_axis.grid_style ?? {})}
+                />
+              {/if}
+              <line
+                x1="-5"
+                x2="0"
+                stroke={y_axis.color || `var(--border-color, gray)`}
+                stroke-width="1"
+              />
+              <text
+                x={text_x}
+                y={shift_y}
+                text-anchor="end"
+                dominant-baseline="central"
+                fill={y_axis.color || `var(--text-color)`}
+                transform={rotation !== 0
+                ? `rotate(${rotation}, ${text_x}, ${shift_y})`
+                : undefined}
+              >
+                {format_value(tick, y_axis.format)}
+              </text>
+            </g>
+          {/if}
+        {/each}
+        {#if y_axis.label}
+          {@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(15, pad.l - max_y_tick_width - 35) + shift_x}
+          {@const y_label_y = pad.t + chart_height / 2 + shift_y}
+          <text
+            x={y_label_x}
+            y={y_label_y}
+            text-anchor="middle"
+            fill={y_axis.color || `var(--text-color)`}
+            transform="rotate(-90, {y_label_x}, {y_label_y})"
+          >
+            {@html y_axis.label}
+          </text>
+        {/if}
+      </g>
+
+      <!-- Y2-axis (Right) -->
+      <!-- Note: y2 axis is only supported for vertical orientation. Implementing x2 for horizontal mode requires additional complexity. -->
+      {#if y2_series.length > 0 && orientation === `vertical`}
+        <g class="y2-axis">
+          <line
+            x1={width - pad.r}
+            x2={width - pad.r}
+            y1={pad.t}
+            y2={height - pad.b}
+            stroke={y2_axis.color || `var(--border-color, gray)`}
+            stroke-width="1"
+          />
+          {#each ticks.y2 as tick (tick)}
+            {@const tick_y = scales.y2(tick as number)}
+            {#if isFinite(tick_y)}
+              {@const rotation = y2_axis.tick_rotation ?? 0}
+              {@const shift_x = y2_axis.tick_label_shift?.x ?? 8}
+              {@const shift_y = y2_axis.tick_label_shift?.y ?? 0}
+              <g class="tick" transform="translate({width - pad.r}, {tick_y})">
+                {#if display.y2_grid}
+                  <line
+                    x1={-(width - pad.l - pad.r)}
+                    x2="0"
+                    {...DEFAULT_GRID_STYLE}
+                    {...(y2_axis.grid_style ?? {})}
+                  />
+                {/if}
+                <line
+                  x1="0"
+                  x2="5"
+                  stroke={y2_axis.color || `var(--border-color, gray)`}
+                  stroke-width="1"
+                />
+                <text
+                  x={shift_x}
+                  y={shift_y}
+                  text-anchor="start"
+                  dominant-baseline="central"
+                  fill={y2_axis.color || `var(--text-color)`}
+                  transform={rotation !== 0
+                  ? `rotate(${rotation}, ${shift_x}, ${shift_y})`
+                  : undefined}
+                >
+                  {format_value(tick, y2_axis.format)}
+                </text>
+              </g>
+            {/if}
+          {/each}
+          {#if y2_axis.label}
+            {@const shift_x = y2_axis.label_shift?.x ?? 0}
+            {@const shift_y = y2_axis.label_shift?.y ?? 0}
+            {@const y2_label_x = width - pad.r + 50 + shift_x}
+            {@const y2_label_y = pad.t + chart_height / 2 + shift_y}
+            <text
+              x={y2_label_x}
+              y={y2_label_y}
+              text-anchor="middle"
+              fill={y2_axis.color || `var(--text-color)`}
+              transform="rotate(-90, {y2_label_x}, {y2_label_y})"
+            >
+              {@html y2_axis.label}
+            </text>
+          {/if}
+        </g>
+      {/if}
+
       <!-- Define clip path for chart area -->
       <defs>
         <clipPath id={clip_path_id}>
@@ -302,33 +616,37 @@ let group_info = $derived.by(() => {
       <!-- Clipped content: zero lines, bars, and lines -->
       <g clip-path="url(#{clip_path_id})">
         <!-- Zero lines -->
-        {#if show_zero_lines}
+        {#if display.x_zero_line && (x_axis.scale_type ?? `linear`) === `linear` &&
+          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 && (y_axis.scale_type ?? `linear`) === `linear` &&
+          ranges.current.y[0] <= 0 && ranges.current.y[1] >= 0}
           {@const zy = scales.y(0)}
-          {#if ranges.current.x[0] <= 0 && ranges.current.x[1] >= 0 && isFinite(zx)}
-            <line
-              x1={zx}
-              x2={zx}
-              y1={pad.t}
-              y2={height - pad.b}
-              stroke="gray"
-              stroke-width="0.5"
-            />
+          {#if isFinite(zy)}
+            <line class="zero-line" x1={pad.l} x2={width - pad.r} y1={zy} y2={zy} />
           {/if}
-          {#if ranges.current.y[0] < 0 && ranges.current.y[1] > 0 && isFinite(zy)}
+        {/if}
+        {#if display.y_zero_line && y2_series.length > 0 &&
+          (y2_axis.scale_type ?? `linear`) === `linear` &&
+          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={zy}
-              y2={zy}
-              stroke="gray"
-              stroke-width="0.5"
+              y1={zero_y2}
+              y2={zero_y2}
             />
           {/if}
         {/if}
 
         <!-- Bars and Lines -->
-        {#each series as srs, series_idx (series_idx)}
+        {#each series as srs, series_idx (srs?.id ?? series_idx)}
           {#if srs?.visible ?? true}
             {@const is_line = srs.render_mode === `line`}
             <g
@@ -337,9 +655,11 @@ let group_info = $derived.by(() => {
             >
               {#if is_line}
                 <!-- Render as line -->
-                {@const color = srs.color ?? default_bar_color}
-                {@const stroke_width = srs.line_style?.stroke_width ?? 2}
+                {@const color = srs.color ?? line.color ?? `steelblue`}
+                {@const stroke_width = srs.line_style?.stroke_width ?? line.width ?? 2}
                 {@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 points = srs.x.map((x_val, idx) => {
             const y_val = srs.y[idx]
             // Lines don't stack - they show absolute values (useful for totals/trends)
@@ -347,7 +667,7 @@ let group_info = $derived.by(() => {
               ? scales.x(x_val)
               : scales.x(y_val)
             const plot_y = orientation === `vertical`
-              ? scales.y(y_val)
+              ? y_scale(y_val)
               : scales.y(x_val)
             return { x: plot_x, y: plot_y, idx }
           }).filter((p) => isFinite(p.x) && isFinite(p.y))}
@@ -423,23 +743,28 @@ let group_info = $derived.by(() => {
                   {@const base = mode === `stacked`
             ? (stacked_offsets[series_idx]?.[bar_idx] ?? 0)
             : 0}
-                  {@const color = srs.color ?? default_bar_color}
+                  {@const color = srs.color ?? bar.color ?? `steelblue`}
                   {@const bar_width_val = Array.isArray(srs.bar_width)
             ? (srs.bar_width[bar_idx] ?? 0.5)
             : (srs.bar_width ?? 0.5)}
                   {@const half = mode === `grouped` && group_info.bar_series_count > 1
             ? bar_width_val / (2 * group_info.bar_series_count)
             : bar_width_val / 2}
+                  {@const calculate_group_offset = (idx: number) => {
+            const position = group_info.bar_series_indices.indexOf(idx)
+            const offset = position - (group_info.bar_series_count - 1) / 2
+            return offset * (bar_width_val / group_info.bar_series_count)
+          }}
                   {@const group_offset = mode === `grouped` && group_info.bar_series_count > 1
-            ? ((pos = group_info.bar_series_indices.indexOf(series_idx)) =>
-              (pos - (group_info.bar_series_count - 1) / 2) *
-              (bar_width_val / group_info.bar_series_count))()
+            ? calculate_group_offset(series_idx)
             : 0}
                   {@const is_vertical = orientation === `vertical`}
                   {@const cat_val = x_val}
                   {@const val = y_val}
+                  {@const use_y2 = srs.y_axis === `y2`}
+                  {@const y_scale = use_y2 ? scales.y2 : scales.y}
                   {@const [cat_scale, val_scale] = is_vertical
-            ? [scales.x, scales.y]
+            ? [scales.x, y_scale]
             : [scales.y, scales.x]}
                   {@const c0 = cat_scale(cat_val + group_offset - half)}
                   {@const c1 = cat_scale(cat_val + group_offset + half)}
@@ -458,7 +783,7 @@ let group_info = $derived.by(() => {
                       width={rect_w}
                       height={rect_h}
                       fill={color}
-                      opacity={mode === `overlay` ? 0.6 : 1}
+                      opacity={mode === `overlay` ? bar.opacity : 1}
                       role="button"
                       tabindex="0"
                       aria-label={`bar ${bar_idx + 1} of ${srs.label ?? `series`}`}
@@ -502,110 +827,6 @@ let group_info = $derived.by(() => {
           {/if}
         {/each}
       </g>
-
-      <!-- Zoom rectangle -->
-      {#if drag_state.start && drag_state.current}
-        {@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}
-
-      <!-- X-axis -->
-      <g class="x-axis">
-        <line
-          x1={pad.l}
-          x2={width - pad.r}
-          y1={height - pad.b}
-          y2={height - pad.b}
-          stroke="var(--border-color, gray)"
-          stroke-width="1"
-        />
-        {#each ticks.x as tick (tick)}
-          {@const tick_x = scales.x(tick as number)}
-          {#if isFinite(tick_x)}
-            <g class="tick" transform="translate({tick_x}, {height - pad.b})">
-              {#if x_grid}
-                <line
-                  y1={-(height - pad.b - pad.t)}
-                  y2="0"
-                  {...typeof x_grid === `object` ? x_grid : {}}
-                />
-              {/if}
-              <line y1="0" y2="5" stroke="var(--border-color, gray)" stroke-width="1" />
-              <text y="18" text-anchor="middle" fill="var(--text-color)">
-                {format_value(tick, x_format)}
-              </text>
-            </g>
-          {/if}
-        {/each}
-        {#if x_label}
-          <text
-            x={pad.l + chart_width / 2 + (x_label_shift.x ?? 0)}
-            y={height - (pad.b / 3) + (x_label_shift.y ?? 0)}
-            text-anchor="middle"
-            fill="var(--text-color)"
-          >
-            {x_label}
-          </text>
-        {/if}
-      </g>
-
-      <!-- Y-axis -->
-      <g class="y-axis">
-        <line
-          x1={pad.l}
-          x2={pad.l}
-          y1={pad.t}
-          y2={height - pad.b}
-          stroke="var(--border-color, gray)"
-          stroke-width="1"
-        />
-        {#each ticks.y as tick (tick)}
-          {@const tick_y = scales.y(tick as number)}
-          {#if isFinite(tick_y)}
-            <g class="tick" transform="translate({pad.l}, {tick_y})">
-              {#if y_grid}
-                <line
-                  x1="0"
-                  x2={width - pad.l - pad.r}
-                  {...typeof y_grid === `object` ? y_grid : {}}
-                />
-              {/if}
-              <line x1="-5" x2="0" stroke="var(--border-color, gray)" stroke-width="1" />
-              <text
-                x="-10"
-                text-anchor="end"
-                dominant-baseline="central"
-                fill="var(--text-color)"
-              >
-                {format_value(tick, y_format)}
-              </text>
-            </g>
-          {/if}
-        {/each}
-        {#if y_label}
-          {@const max_y_tick_width = Math.max(
-          0,
-          ...ticks.y.map((tick) =>
-            measure_text_width(format_value(tick, y_format), `12px sans-serif`)
-          ),
-        )}
-          {@const y_label_x = Math.max(15, pad.l - max_y_tick_width - 35) +
-          (y_label_shift.x ?? 0)}
-          {@const y_label_y = pad.t + chart_height / 2 + (y_label_shift.y ?? 0)}
-          <text
-            x={y_label_x}
-            y={y_label_y}
-            text-anchor="middle"
-            fill="var(--text-color)"
-            transform="rotate(-90, {y_label_x}, {y_label_y})"
-          >
-            {y_label}
-          </text>
-        {/if}
-      </g>
     </svg>
 
     <!-- Legend -->
@@ -619,8 +840,11 @@ let group_info = $derived.by(() => {
     {/if}
 
     {#if hover_info && hovered}
+      {@const srs = series[hover_info.series_idx]}
+      {@const use_y2 = srs?.y_axis === `y2`}
+      {@const active_y_axis = use_y2 ? y2_axis : y_axis}
       {@const cx = scales.x(hover_info.orient_x)}
-      {@const cy = scales.y(hover_info.orient_y)}
+      {@const cy = (use_y2 ? scales.y2 : scales.y)(hover_info.orient_y)}
       <div
         class="tooltip overlay"
         style={`position: absolute; left: ${cx + 6}px; top: ${cy}px; pointer-events: none;`}
@@ -628,8 +852,16 @@ let group_info = $derived.by(() => {
         {#if tooltip}
           {@render tooltip(hover_info)}
         {:else}
-          <div>{x_label || `x`}: {format_value(hover_info.orient_x, x_format)}</div>
-          <div>{y_label || `y`}: {format_value(hover_info.orient_y, y_format)}</div>
+          <div>
+            {x_axis.label || `x`}: {
+              format_value(hover_info.orient_x, x_axis.format || `.3~s`)
+            }
+          </div>
+          <div>
+            {active_y_axis.label || `y`}: {
+              format_value(hover_info.orient_y, active_y_axis.format || `.3~s`)
+            }
+          </div>
         {/if}
       </div>
     {/if}
@@ -637,21 +869,18 @@ let group_info = $derived.by(() => {
     {#if show_controls}
       <BarPlotControls
         toggle_props={controls_toggle_props}
+        pane_props={controls_pane_props}
         bind:show_controls
         bind:controls_open
         bind:orientation
         bind:mode
-        bind:x_grid
-        bind:y_grid
-        bind:x_ticks
-        bind:y_ticks
-        bind:x_format
-        bind:y_format
-        bind:x_range
-        bind:y_range
+        bind:x_axis
+        bind:y_axis
+        bind:y2_axis
+        bind:display
         auto_x_range={auto_ranges.x as [number, number]}
         auto_y_range={auto_ranges.y as [number, number]}
-        {plot_controls}
+        auto_y2_range={auto_ranges.y2 as [number, number]}
       />
     {/if}
   {/if}
@@ -679,7 +908,7 @@ let group_info = $derived.by(() => {
     height: 100%;
     overflow: var(--svg-overflow, visible);
   }
-  g:is(.x-axis, .y-axis) .tick text {
+  g:is(.x-axis, .y-axis, .y2-axis) .tick text {
     font-size: var(--tick-font-size, 0.8em);
   }
   .zoom-rect {
@@ -700,4 +929,9 @@ let group_info = $derived.by(() => {
     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>