@cfasim-ui/docs 0.4.10 → 0.4.12

package/charts/LineChart/LineChart.vue

@@ -13,10 +13,28 @@ import {
   useChartFoundation,
   makeTooltipValueFormatter,
   ChartAnnotations,
+  INLINE_LEGEND_ROW_HEIGHT,
+  TITLE_LINE_HEIGHT,
+  TITLE_FONT_SIZE,
+  TITLE_FONT_WEIGHT,
+  AXIS_LABEL_FONT_SIZE,
+  TICK_LABEL_FONT_SIZE,
+  TICK_LABEL_OPACITY,
+  LEGEND_FONT_SIZE,
+  resolveLabelStyle,
+  parseDate,
+  isAllDates,
+  pickDateTicks,
+  formatDate,
   type ChartData,
+  type LabelStyle,
+  type DateFormat,
+  type DateTickUnit,
+  type DateTimezone,
   type ChartCommonProps,
   type ChartHoverPayload,
   type ChartTooltipBaseProps,
+  type ChartTooltipValue,
 } from "../_shared/index.js";
 
 /**
@@ -27,6 +45,13 @@ import {
  */
 export type LineChartData = ChartData;
 
+/**
+ * Accepted shapes for an `x` array. Numeric arrays (typed or plain) plot
+ * as numbers; string-or-`Date` arrays trigger date-axis mode when every
+ * element parses. See the `timezone` prop and `dateAxis` module.
+ */
+export type LineChartXInput = LineChartData | readonly (string | Date)[];
+
 export interface Series {
   /**
    * Y-values. One of `y` or `data` must be supplied; `y` wins if both
@@ -38,9 +63,10 @@ export interface Series {
   /**
    * Optional x-values, parallel to `y`/`data`. When set, the chart
    * plots points at the given x positions (irregular spacing supported).
-   * When omitted, points are plotted at indices 0, 1, 2, ...
+   * When omitted, points are plotted at indices 0, 1, 2, ... Accepts
+   * date strings or `Date` objects to enable date-axis mode.
    */
-  x?: LineChartData;
+  x?: LineChartXInput;
   color?: string;
   dashed?: boolean;
   strokeWidth?: number;
@@ -48,19 +74,35 @@ export interface Series {
   lineOpacity?: number;
   dotOpacity?: number;
   line?: boolean;
+  /**
+   * Draw a page-colored stroke behind the line so it stays visually
+   * separated from overlapping series and busy backgrounds. Has no
+   * effect when `line` is `false`.
+   */
+  outline?: boolean;
   dots?: boolean;
   dotRadius?: number;
   dotFill?: string;
   dotStroke?: string;
   /** Label shown in the inline legend */
   legend?: string;
+  /**
+   * Whether this series appears in the inline legend. Defaults to true.
+   * Has no effect when `legend` is unset (no legend entry to begin with).
+   */
+  showInLegend?: boolean;
+  /**
+   * Whether this series contributes a value to the tooltip and shows a
+   * hover dot. Defaults to true. The series line/dots are still drawn.
+   */
+  showInTooltip?: boolean;
 }
 
 export interface Area {
   upper: LineChartData;
   lower: LineChartData;
   /** Optional x-values parallel to `upper`/`lower`. See `Series.x`. */
-  x?: LineChartData;
+  x?: LineChartXInput;
   color?: string;
   opacity?: number;
 }
@@ -86,6 +128,17 @@ export interface AreaSection {
   dashed?: boolean;
   /** Label placement: "below" (default) renders below chart, "inline" renders in legend row, false hides label */
   legend?: "inline" | "below" | false;
+  /**
+   * Style for the area section's primary label text. Defaults: font-size
+   * 11, font-weight 600, color taken from the section's `color`.
+   */
+  inlineLabelStyle?: LabelStyle;
+  /**
+   * Style for the area section's secondary description text. Defaults:
+   * font-size 11, currentColor at 0.6 opacity. Providing `color` drops
+   * the default opacity.
+   */
+  inlineDescriptionStyle?: LabelStyle;
 }
 
 interface LineChartProps extends ChartCommonProps {
@@ -97,8 +150,9 @@ interface LineChartProps extends ChartCommonProps {
    * Optional x-values paired with `y`/`data`. When provided, points
    * are plotted at the given x positions instead of at their indices.
    * Ignored when `series` is used — set `x` on each `Series` instead.
+   * Accepts date strings or `Date` objects to enable date-axis mode.
    */
-  x?: LineChartData;
+  x?: LineChartXInput;
   series?: Series[];
   areas?: Area[];
   areaSections?: AreaSection[];
@@ -131,12 +185,24 @@ interface LineChartProps extends ChartCommonProps {
    */
   yTicks?: number | number[];
   /**
-   * Formatter for x-axis tick labels. Accepts a preset name, a printf-style
-   * format string, or a function. The two-arg function form `(value, index)`
-   * is also supported for index-based labels. See `formatNumber` in
-   * `@cfasim-ui/shared`.
+   * Formatter for x-axis tick labels. On a numeric axis, accepts a
+   * preset name, a printf-style format string, or a function (the
+   * two-arg `(value, index)` form is also supported for index-based
+   * labels — see `formatNumber` in `@cfasim-ui/shared`). On a date
+   * axis (auto-detected when every x value parses as a date), accepts
+   * a `DateFormat` instead — see the `dateAxis` module.
+   */
+  xTickFormat?:
+    | NumberFormat
+    | ((value: number, index: number) => string)
+    | DateFormat;
+  /**
+   * Timezone used when parsing offset-less ISO strings and rendering
+   * date-axis tick labels. `"utc"` (default) keeps visuals consistent
+   * across viewers; `"local"` uses the browser timezone. Ignored on a
+   * numeric axis.
    */
-  xTickFormat?: NumberFormat | ((value: number, index: number) => string);
+  timezone?: DateTimezone;
   /**
    * Formatter for y-axis tick labels. Accepts a preset name, a printf-style
    * format string, or a function. See `formatNumber` in `@cfasim-ui/shared`.
@@ -167,25 +233,50 @@ defineSlots<{
   tooltip?(props: ChartTooltipBaseProps & { xLabel?: string }): unknown;
 }>();
 
-const hasInlineLegend = computed(
-  () =>
-    allSeries.value.some((s) => s.legend) ||
-    props.areaSections?.some(
-      (s) => s.legend === "inline" && (s.label || s.description),
-    ) ||
-    false,
-);
-
 /**
- * Internal series shape where `data` (y-values) is always resolved.
- * `Series.y` takes precedence over `Series.data` when both are set.
+ * Internal series shape where `data` (y-values) is always resolved and
+ * `x` is narrowed to numeric (date inputs have already been parsed to
+ * epoch-ms). `Series.y` takes precedence over `Series.data`.
  */
-type ResolvedSeries = Omit<Series, "data" | "y"> & { data: LineChartData };
+type ResolvedSeries = Omit<Series, "data" | "y" | "x"> & {
+  data: LineChartData;
+  x?: LineChartData;
+};
+
+/** Same shape as `Area` but with `x` narrowed to numeric post-parse. */
+type ResolvedArea = Omit<Area, "x"> & { x?: LineChartData };
 
 const EMPTY_DATA: readonly number[] = [];
 
-function resolveSeries(s: Series): ResolvedSeries {
-  return { ...s, data: s.y ?? s.data ?? EMPTY_DATA };
+/**
+ * Yields every user-supplied `x` array on the component (top-level,
+ * per-series, per-area). Used both for date auto-detection and for the
+ * single-pass resolution that converts strings/Dates to numeric ms.
+ */
+function* xInputs(p: LineChartProps): Iterable<LineChartXInput> {
+  if (p.x && p.x.length > 0) yield p.x;
+  if (p.series) {
+    for (const s of p.series) if (s.x && s.x.length > 0) yield s.x;
+  }
+  if (p.areas) {
+    for (const a of p.areas) if (a.x && a.x.length > 0) yield a.x;
+  }
+}
+
+/** Convert an x input to numeric. Pre-parsed when `isDate` is true. */
+function toNumericX(
+  x: LineChartXInput | undefined,
+  isDate: boolean,
+  tz: DateTimezone,
+): LineChartData | undefined {
+  if (!x) return undefined;
+  if (!isDate) return x as LineChartData;
+  const out = new Float64Array(x.length);
+  for (let i = 0; i < x.length; i++) {
+    const v = parseDate(x[i], tz);
+    out[i] = v ?? NaN;
+  }
+  return out;
 }
 
 const formatTooltipValue = makeTooltipValueFormatter(
@@ -193,15 +284,58 @@ const formatTooltipValue = makeTooltipValueFormatter(
   () => props.yTickFormat,
 );
 
-const allSeries = computed<ResolvedSeries[]>(() => {
-  if (props.series && props.series.length > 0)
-    return props.series.map(resolveSeries);
-  const topY = props.y ?? props.data;
-  if (topY) return [{ data: topY, x: props.x }];
-  return [];
+const tz = computed<DateTimezone>(() => props.timezone ?? "utc");
+
+/**
+ * Single-pass resolution of x-axis mode + resolved series and areas.
+ * Date auto-detection (`isAllDates` per input array) and date→ms
+ * conversion (`toNumericX`) both call `parseDate`; this computed
+ * makes sure each user-supplied x value is parsed exactly once per
+ * render even though we have multiple consumers.
+ */
+const resolvedXAxis = computed<{
+  isDate: boolean;
+  series: ResolvedSeries[];
+  areas: ResolvedArea[];
+}>(() => {
+  const z = tz.value;
+  let isDate = false;
+  let any = false;
+  for (const x of xInputs(props)) {
+    any = true;
+    if (!isAllDates(x, z)) {
+      isDate = false;
+      break;
+    }
+    isDate = true;
+  }
+  if (!any) isDate = false;
+
+  const series: ResolvedSeries[] =
+    props.series && props.series.length > 0
+      ? props.series.map((s) => ({
+          ...s,
+          data: s.y ?? s.data ?? EMPTY_DATA,
+          x: toNumericX(s.x, isDate, z),
+        }))
+      : (() => {
+          const topY = props.y ?? props.data;
+          return topY
+            ? [{ data: topY, x: toNumericX(props.x, isDate, z) }]
+            : [];
+        })();
+
+  const areas: ResolvedArea[] = (props.areas ?? []).map((a) => ({
+    ...a,
+    x: toNumericX(a.x, isDate, z),
+  }));
+
+  return { isDate, series, areas };
 });
 
-const allAreas = computed<Area[]>(() => props.areas ?? []);
+const xIsDate = computed(() => resolvedXAxis.value.isDate);
+const allSeries = computed<ResolvedSeries[]>(() => resolvedXAxis.value.series);
+const allAreas = computed<ResolvedArea[]>(() => resolvedXAxis.value.areas);
 
 const maxLen = computed(() => {
   let m = 0;
@@ -228,7 +362,7 @@ function seriesXAt(s: { x?: LineChartData }, i: number): number {
 }
 
 /** Data-space x value for the i-th point of an area. */
-function areaXAt(a: Area, i: number): number {
+function areaXAt(a: ResolvedArea, i: number): number {
   return a.x ? Number(a.x[i]) : i;
 }
 
@@ -337,7 +471,7 @@ function toPoints(s: ResolvedSeries): { x: number; y: number }[] {
   return pts;
 }
 
-function toAreaPath(a: Area): string {
+function toAreaPath(a: ResolvedArea): string {
   const len = Math.min(a.upper.length, a.lower.length);
   if (len === 0) return "";
   // Collect contiguous segments where both upper/lower and x are finite
@@ -426,6 +560,8 @@ interface PositionedSectionLabel {
   row: number;
   color: string;
   fillOpacity: number;
+  labelStyle: ReturnType<typeof resolveLabelStyle>;
+  descStyle: ReturnType<typeof resolveLabelStyle>;
 }
 
 const sectionLabels = computed<{
@@ -458,6 +594,16 @@ const sectionLabels = computed<{
       (sec.seriesIndex != null
         ? (allSeries.value[sec.seriesIndex]?.color ?? "currentColor")
         : "#999");
+    // Section labels default to the section's data-driven color/weight;
+    // user-supplied styles override piece-by-piece.
+    const labelStyle = resolveLabelStyle(
+      { color, fontWeight: 600, ...sec.inlineLabelStyle },
+      { fontSize: 11 },
+    );
+    const descStyle = resolveLabelStyle(sec.inlineDescriptionStyle, {
+      fontSize: 11,
+      fillOpacity: 0.6,
+    });
     items.push({
       cx,
       labelText,
@@ -466,6 +612,8 @@ const sectionLabels = computed<{
       row: 0,
       color,
       fillOpacity: sec.opacity ?? 0.15,
+      labelStyle,
+      descStyle,
     });
   }
 
@@ -503,7 +651,7 @@ interface InlineLegendItem {
 const inlineLegendItems = computed<InlineLegendItem[]>(() => {
   const items: InlineLegendItem[] = [];
   for (const s of allSeries.value) {
-    if (!s.legend) continue;
+    if (!s.legend || s.showInLegend === false) continue;
     items.push({
       label: s.legend,
       color: s.color ?? "currentColor",
@@ -533,6 +681,10 @@ const inlineLegendItems = computed<InlineLegendItem[]>(() => {
   return items;
 });
 
+const inlineLegendLabels = computed(() =>
+  inlineLegendItems.value.map((item) => item.label),
+);
+
 const totalHeight = computed(
   () => height.value + sectionLabels.value.extraHeight,
 );
@@ -568,43 +720,68 @@ const yTickItems = computed(() => {
   return values.map((v) => ({ value: fmt(v), y: snap(yPixel(v)) }));
 });
 
+/**
+ * Format a single x-axis value into its display label. Used by both
+ * tick rendering and the tooltip x-label so the two stay in sync. On
+ * a date axis, `unit` (when supplied) drives the default formatter's
+ * preset choice (year-tick → "year", month-tick → "month-year", etc.);
+ * the tooltip path leaves it undefined and gets the ISO default.
+ */
+function formatXValue(v: number, i: number, unit?: DateTickUnit): string {
+  const xf = props.xTickFormat;
+  if (xIsDate.value) {
+    if (typeof xf === "function") {
+      return (xf as (v: number, i: number) => string)(v, i);
+    }
+    return formatDate(v, xf as DateFormat | undefined, tz.value, unit);
+  }
+  const display = v + xDisplayOffset.value;
+  if (xf !== undefined) {
+    return typeof xf === "function"
+      ? (xf as (v: number, i: number) => string)(display, i)
+      : formatNumber(display, xf as NumberFormat);
+  }
+  if (
+    !hasExplicitX.value &&
+    props.xLabels &&
+    Number.isInteger(v) &&
+    v >= 0 &&
+    v < props.xLabels.length
+  ) {
+    return props.xLabels[v];
+  }
+  return formatTick(display);
+}
+
 const xTickItems = computed(() => {
   const { min: xMin, max: xMax } = xExtent.value;
   if (xMin === xMax) return [];
-  const offset = xDisplayOffset.value;
+  const isDate = xIsDate.value;
+  // `xMin` (display offset) is meaningless on a date axis — every x
+  // value already lives in absolute ms.
+  const offset = isDate ? 0 : xDisplayOffset.value;
   const len = maxLen.value;
-
-  // Tick values are in data-space; display labels add `xDisplayOffset`.
-  const fmt = (v: number, i: number) => {
-    const display = v + offset;
-    const xf = props.xTickFormat;
-    if (xf !== undefined) {
-      return typeof xf === "function"
-        ? xf(display, i)
-        : formatNumber(display, xf);
-    }
-    if (
-      !hasExplicitX.value &&
-      props.xLabels &&
-      Number.isInteger(v) &&
-      v >= 0 &&
-      v < props.xLabels.length
-    ) {
-      return props.xLabels[v];
-    }
-    return formatTick(display);
-  };
+  const targetTickCount = innerW.value / 80;
 
   let values: number[];
-  if (
+  let unit: DateTickUnit | undefined;
+  if (isDate) {
+    const picked = pickDateTicks(xMin, xMax, targetTickCount, tz.value);
+    unit = picked.unit;
+    // Run through computeTickValues so the clip-to-range semantics
+    // match the numeric path. xMin is already 0, so `ticks` is used
+    // directly.
+    values = computeTickValues({ min: xMin, max: xMax, ticks: picked.values });
+  } else if (
     props.xTicks == null &&
     !hasExplicitX.value &&
     props.xLabels &&
     props.xLabels.length === len
   ) {
     // xLabels fallback: pick evenly-spaced index ticks so every label
-    // bucket gets at most one tick.
-    const targetTicks = Math.max(3, Math.floor(innerW.value / 80));
+    // bucket gets at most one tick. Date mode supersedes xLabels — if
+    // both are supplied, only the date axis is used.
+    const targetTicks = Math.max(3, Math.floor(targetTickCount));
     const step = Math.max(1, Math.round((len - 1) / targetTicks));
     values = [];
     for (let i = 0; i < len; i += step) values.push(i);
@@ -613,7 +790,7 @@ const xTickItems = computed(() => {
       min: xMin,
       max: xMax,
       ticks: props.xTicks,
-      targetTickCount: innerW.value / 80,
+      targetTickCount,
       displayOffset: offset,
     });
   }
@@ -626,7 +803,7 @@ const xTickItems = computed(() => {
     let anchor: "start" | "middle" | "end" = "middle";
     if (x - leftEdge <= edgeSnapPx) anchor = "start";
     else if (rightEdge - x <= edgeSnapPx) anchor = "end";
-    return { value: fmt(v, i), x, anchor };
+    return { value: formatXValue(v, i, unit), x, anchor };
   });
 });
 
@@ -675,6 +852,7 @@ const hoverDots = computed(() => {
   if (targetX === null) return [];
   const dots: { x: number; y: number; color: string }[] = [];
   for (const s of allSeries.value) {
+    if (s.showInTooltip === false) continue;
     const nIdx = nearestIndex(s, targetX);
     if (nIdx === null) continue;
     const yv = s.data[nIdx];
@@ -692,29 +870,24 @@ const hoverSlotProps = computed(() => {
   const idx = hoverIndex.value;
   const targetX = hoverDataX.value;
   if (idx === null || targetX === null) return null;
-  const offset = xDisplayOffset.value;
-  const displayX = targetX + offset;
-  let xLabel: string | undefined;
-  const xf = props.xTickFormat;
-  if (xf !== undefined) {
-    xLabel =
-      typeof xf === "function" ? xf(displayX, idx) : formatNumber(displayX, xf);
-  } else if (!hasExplicitX.value) {
-    xLabel = props.xLabels?.[idx];
-  } else {
-    xLabel = formatTick(displayX);
+  // Single source of truth for label dispatch — same as the x-axis ticks.
+  const xLabel = formatXValue(targetX, idx);
+  const series = allSeries.value;
+  const values: ChartTooltipValue[] = [];
+  for (let i = 0; i < series.length; i++) {
+    const s = series[i];
+    if (s.showInTooltip === false) continue;
+    const nIdx = nearestIndex(s, targetX);
+    values.push({
+      value: nIdx !== null ? Number(s.data[nIdx]) : NaN,
+      color: s.color ?? "currentColor",
+      seriesIndex: i,
+    });
   }
   return {
     index: idx,
     xLabel,
-    values: allSeries.value.map((s, i) => {
-      const nIdx = nearestIndex(s, targetX);
-      return {
-        value: nIdx !== null ? Number(s.data[nIdx]) : NaN,
-        color: s.color ?? "currentColor",
-        seriesIndex: i,
-      };
-    }),
+    values,
     data: props.tooltipData?.[idx] ?? null,
   };
 });
@@ -747,6 +920,7 @@ const {
   height,
   padding,
   legendY,
+  inlineLegendLayout,
   innerW,
   innerH,
   bounds,
@@ -758,10 +932,12 @@ const {
   downloadLinkText,
   csvHref,
   menuFilename,
+  isFullscreen,
 } = useChartFoundation({
   width: () => props.width,
   height: () => props.height,
   title: () => props.title,
+  titleStyle: () => props.titleStyle,
   xLabel: () => props.xLabel,
   yLabel: () => props.yLabel,
   debounce: () => props.debounce,
@@ -771,40 +947,113 @@ const {
   filename: () => props.filename,
   downloadLink: () => props.downloadLink,
   chartPadding: () => props.chartPadding,
-  hasInlineLegend: () => hasInlineLegend.value,
+  inlineLegendLabels: () => inlineLegendLabels.value,
   hasTooltipSlot: () => hasTooltipSlot.value,
   getCsv: toCsv,
   pointerToIndex: indexFromPointer,
   onHover: (payload) => emit("hover", payload),
+  extraBelowHeight: () => sectionLabels.value.extraHeight,
+});
+
+/** Resolved style for the x/y axis labels. */
+const axisLabelResolved = computed(() =>
+  resolveLabelStyle(props.axisLabelStyle, { fontSize: AXIS_LABEL_FONT_SIZE }),
+);
+/** Resolved style for the axis tick labels. */
+const tickLabelResolved = computed(() =>
+  resolveLabelStyle(props.tickLabelStyle, {
+    fontSize: TICK_LABEL_FONT_SIZE,
+    fillOpacity: TICK_LABEL_OPACITY,
+  }),
+);
+/** Resolved style for inline legend item labels. */
+const legendResolved = computed(() =>
+  resolveLabelStyle(props.legendStyle, { fontSize: LEGEND_FONT_SIZE }),
+);
+
+/** Resolved title style with defaults applied. */
+const titleResolved = computed(() => {
+  const s = props.titleStyle;
+  const align = s?.align ?? "left";
+  const b = bounds.value;
+  const x =
+    align === "left"
+      ? b.left
+      : align === "right"
+        ? b.right
+        : b.left + b.width / 2;
+  const anchor =
+    align === "left" ? "start" : align === "right" ? "end" : "middle";
+  return {
+    lines: (props.title ?? "").split("\n"),
+    fontSize: s?.fontSize ?? TITLE_FONT_SIZE,
+    lineHeight: s?.lineHeight ?? TITLE_LINE_HEIGHT,
+    fontWeight: s?.fontWeight ?? TITLE_FONT_WEIGHT,
+    color: s?.color ?? "currentColor",
+    x,
+    anchor,
+  };
+});
+
+/**
+ * Legend items joined with their wrapped pixel positions. `x` is the
+ * left edge of the indicator; `y` is the center of the row.
+ */
+const positionedLegendItems = computed(() => {
+  const positions = inlineLegendLayout.value.positions;
+  const pad = padding.value.left;
+  const baseY = legendY.value;
+  return inlineLegendItems.value.map((item, i) => {
+    const pos = positions[i];
+    return {
+      ...item,
+      x: pad + pos.x,
+      y: baseY + pos.row * INLINE_LEGEND_ROW_HEIGHT,
+    };
+  });
 });
 </script>
 
 <template>
-  <div ref="containerRef" class="line-chart-wrapper">
+  <div
+    ref="containerRef"
+    class="line-chart-wrapper"
+    :class="{ 'is-fullscreen': isFullscreen }"
+  >
     <ChartMenu v-if="menu" :items="menuItems" />
+    <div class="chart-sr-only" aria-live="polite">
+      {{ isFullscreen ? "Chart expanded to fill window" : "" }}
+    </div>
     <svg ref="svgRef" :width="width" :height="totalHeight">
       <!-- title -->
       <text
         v-if="title"
-        :x="width / 2"
-        :y="18"
-        text-anchor="middle"
-        font-size="14"
-        font-weight="600"
-        fill="currentColor"
+        :x="titleResolved.x"
+        :y="titleResolved.lineHeight"
+        :text-anchor="titleResolved.anchor"
+        :font-size="titleResolved.fontSize"
+        :font-weight="titleResolved.fontWeight"
+        :fill="titleResolved.color"
       >
-        {{ title }}
+        <tspan
+          v-for="(line, i) in titleResolved.lines"
+          :key="i"
+          :x="titleResolved.x"
+          :dy="i === 0 ? 0 : titleResolved.lineHeight"
+        >
+          {{ line }}
+        </tspan>
       </text>
       <!-- inline legend -->
-      <g v-if="inlineLegendItems.length > 0">
-        <template v-for="(item, i) in inlineLegendItems" :key="'ileg' + i">
+      <g v-if="positionedLegendItems.length > 0">
+        <template v-for="(item, i) in positionedLegendItems" :key="'ileg' + i">
           <!-- series indicator: line -->
           <line
             v-if="item.type === 'series'"
-            :x1="padding.left + i * 120"
-            :y1="legendY"
-            :x2="padding.left + i * 120 + 12"
-            :y2="legendY"
+            :x1="item.x"
+            :y1="item.y"
+            :x2="item.x + 12"
+            :y2="item.y"
             :stroke="item.color"
             stroke-width="2"
             :stroke-dasharray="item.dashed ? '4 2' : undefined"
@@ -812,8 +1061,8 @@ const {
           <!-- section indicator: filled circle -->
           <circle
             v-else
-            :cx="padding.left + i * 120 + 4"
-            :cy="legendY"
+            :cx="item.x + 4"
+            :cy="item.y"
             r="4"
             :fill="item.color"
             :fill-opacity="item.fillOpacity"
@@ -821,10 +1070,11 @@ const {
             stroke-width="1.5"
           />
           <text
-            :x="padding.left + i * 120 + 18"
-            :y="legendY + 4"
-            font-size="11"
-            fill="currentColor"
+            :x="item.x + 18"
+            :y="item.y + 4"
+            :font-size="legendResolved.fontSize"
+            :fill="legendResolved.fill"
+            :font-weight="legendResolved.fontWeight"
           >
             {{ item.label }}
           </text>
@@ -882,9 +1132,10 @@ const {
         :y="tick.y"
         text-anchor="end"
         dominant-baseline="middle"
-        font-size="10"
-        fill="currentColor"
-        fill-opacity="0.6"
+        :font-size="tickLabelResolved.fontSize"
+        :fill="tickLabelResolved.fill"
+        :font-weight="tickLabelResolved.fontWeight"
+        :fill-opacity="tickLabelResolved.fillOpacity"
       >
         {{ tick.value }}
       </text>
@@ -895,8 +1146,9 @@ const {
         :y="0"
         :transform="`translate(14, ${padding.top + innerH / 2}) rotate(-90)`"
         text-anchor="middle"
-        font-size="13"
-        fill="currentColor"
+        :font-size="axisLabelResolved.fontSize"
+        :fill="axisLabelResolved.fill"
+        :font-weight="axisLabelResolved.fontWeight"
       >
         {{ yLabel }}
       </text>
@@ -908,9 +1160,10 @@ const {
         :x="tick.x"
         :y="padding.top + innerH + 16"
         :text-anchor="tick.anchor"
-        font-size="10"
-        fill="currentColor"
-        fill-opacity="0.6"
+        :font-size="tickLabelResolved.fontSize"
+        :fill="tickLabelResolved.fill"
+        :font-weight="tickLabelResolved.fontWeight"
+        :fill-opacity="tickLabelResolved.fillOpacity"
       >
         {{ tick.value }}
       </text>
@@ -920,8 +1173,9 @@ const {
         :x="padding.left + innerW / 2"
         :y="height - 4"
         text-anchor="middle"
-        font-size="13"
-        fill="currentColor"
+        :font-size="axisLabelResolved.fontSize"
+        :fill="axisLabelResolved.fill"
+        :font-weight="axisLabelResolved.fontWeight"
       >
         {{ xLabel }}
       </text>
@@ -936,6 +1190,16 @@ const {
       />
       <!-- data lines and dots -->
       <template v-for="(s, i) in allSeries" :key="i">
+        <path
+          v-if="s.line !== false && s.outline"
+          :d="toPath(s)"
+          fill="none"
+          stroke="var(--color-bg-0, #fff)"
+          :stroke-width="(s.strokeWidth ?? 1.5) + 4"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          data-testid="line-outline"
+        />
         <path
           v-if="s.line !== false"
           :d="toPath(s)"
@@ -1077,9 +1341,9 @@ const {
           v-if="item.labelText"
           :x="item.cx - item.textWidth / 2 + 8"
           :y="sectionLabelBaseY + item.row * SECTION_LABEL_ROW_HEIGHT + 8"
-          font-size="11"
-          font-weight="600"
-          :fill="item.color"
+          :font-size="item.labelStyle.fontSize"
+          :font-weight="item.labelStyle.fontWeight"
+          :fill="item.labelStyle.fill"
         >
           {{ item.labelText }}
         </text>
@@ -1087,9 +1351,10 @@ const {
           v-if="item.descText"
           :x="item.cx - item.textWidth / 2 + 8"
           :y="sectionLabelBaseY + item.row * SECTION_LABEL_ROW_HEIGHT + 22"
-          font-size="11"
-          fill="currentColor"
-          fill-opacity="0.6"
+          :font-size="item.descStyle.fontSize"
+          :font-weight="item.descStyle.fontWeight"
+          :fill="item.descStyle.fill"
+          :fill-opacity="item.descStyle.fillOpacity"
         >
           {{ item.descText }}
         </text>
@@ -1147,10 +1412,6 @@ const {
   width: 100%;
 }
 
-.line-chart-wrapper:hover :deep(.chart-menu-button) {
-  opacity: 1;
-}
-
 .line-chart-tooltip-label {
   font-weight: 600;
   margin-bottom: 0.25em;