@diagrammo/dgmo 0.8.8 → 0.8.10

package/src/echarts.ts

@@ -113,20 +113,25 @@ import { parseDataRowValues } from './chart';
 // Shared Constants
 // ============================================================
 
-const EMPHASIS_SELF = { focus: 'self' as const, blurScope: 'global' as const };
-const EMPHASIS_LINE = {
-  ...EMPHASIS_SELF,
-  scale: 2.5,
-  itemStyle: {
-    borderWidth: 2,
-    borderColor: '#fff',
-    shadowBlur: 8,
-    shadowColor: 'rgba(0,0,0,0.4)',
-  },
+const EMPHASIS_SELF = {
+  focus: 'self' as const,
+  blurScope: 'global' as const,
+  itemStyle: { opacity: 1 },
 };
-const CHART_BASE: Pick<EChartsOption, 'backgroundColor' | 'animation'> = {
+const EMPHASIS_SERIES = {
+  focus: 'series' as const,
+  blurScope: 'global' as const,
+  itemStyle: { opacity: 1 },
+};
+const BLUR_DIM = { itemStyle: { opacity: 0.15 }, lineStyle: { opacity: 0.15 } };
+const EMPHASIS_LINE = { ...EMPHASIS_SELF };
+const CHART_BASE: Pick<
+  EChartsOption,
+  'backgroundColor' | 'animation' | 'tooltip'
+> = {
   backgroundColor: 'transparent',
   animation: false,
+  tooltip: { show: false },
 };
 const CHART_BORDER_WIDTH = 2;
 
@@ -698,11 +703,6 @@ function buildChartCommons(
         },
       }
     : undefined;
-  const tooltipTheme = {
-    backgroundColor: palette.surface,
-    borderColor: palette.border,
-    textStyle: { color: palette.text },
-  };
   return {
     textColor,
     axisLineColor,
@@ -710,7 +710,6 @@ function buildChartCommons(
     gridOpacity,
     colors,
     titleConfig,
-    tooltipTheme,
   };
 }
 
@@ -729,37 +728,18 @@ export function buildExtendedChartOption(
     return {};
   }
 
-  const {
-    textColor,
-    axisLineColor,
-    gridOpacity,
-    colors,
-    titleConfig,
-    tooltipTheme,
-  } = buildChartCommons(parsed, palette, isDark);
+  const { textColor, axisLineColor, gridOpacity, colors, titleConfig } =
+    buildChartCommons(parsed, palette, isDark);
 
   // Sankey chart has different structure
   if (parsed.type === 'sankey') {
-    return buildSankeyOption(
-      parsed,
-      textColor,
-      colors,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildSankeyOption(parsed, textColor, colors, titleConfig);
   }
 
   // Chord diagram
   if (parsed.type === 'chord') {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildChordOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildChordOption(parsed, textColor, colors, bg, titleConfig);
   }
 
   // Function plot
@@ -771,8 +751,7 @@ export function buildExtendedChartOption(
       axisLineColor,
       gridOpacity,
       colors,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
 
@@ -787,22 +766,14 @@ export function buildExtendedChartOption(
       gridOpacity,
       colors,
       bg,
-      titleConfig,
-      tooltipTheme
+      titleConfig
     );
   }
 
   // Funnel chart
   if (parsed.type === 'funnel') {
     const bg = isDark ? palette.surface : palette.bg;
-    return buildFunnelOption(
-      parsed,
-      textColor,
-      colors,
-      bg,
-      titleConfig,
-      tooltipTheme
-    );
+    return buildFunnelOption(parsed, textColor, colors, bg, titleConfig);
   }
 
   // Heatmap
@@ -812,8 +783,7 @@ export function buildExtendedChartOption(
     isDark,
     textColor,
     axisLineColor,
-    titleConfig,
-    tooltipTheme
+    titleConfig
   );
 }
 
@@ -824,8 +794,7 @@ function buildSankeyOption(
   parsed: ParsedExtendedChart,
   textColor: string,
   colors: string[],
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   // Extract unique nodes from links
   const nodeSet = new Set<string>();
@@ -848,17 +817,15 @@ function buildSankeyOption(
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      show: false,
-      ...tooltipTheme,
-    },
     series: [
       {
         type: 'sankey',
         emphasis: {
           focus: 'adjacency',
           blurScope: 'global' as const,
+          itemStyle: { opacity: 1 },
         },
+        blur: BLUR_DIM,
         nodeAlign: 'left',
         nodeGap: 12,
         nodeWidth: 20,
@@ -890,8 +857,7 @@ function buildChordOption(
   textColor: string,
   colors: string[],
   bg: string,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   // Extract unique nodes from links
   const nodeSet = new Set<string>();
@@ -936,19 +902,6 @@ function buildChordOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-      formatter: (params: unknown) => {
-        const p = params as {
-          data?: { source: string; target: string; value: number };
-        };
-        if (p.data && p.data.source && p.data.target) {
-          return `${p.data.source} → ${p.data.target}: ${p.data.value}`;
-        }
-        return '';
-      },
-    },
     xAxis: { show: false },
     yAxis: { show: false },
     series: [
@@ -1013,11 +966,13 @@ function buildChordOption(
         },
         emphasis: {
           focus: 'adjacency',
+          itemStyle: { opacity: 1 },
           lineStyle: {
             width: 5,
             opacity: 1,
           },
         },
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -1062,8 +1017,7 @@ function buildFunctionOption(
   axisLineColor: string,
   gridOpacity: number,
   colors: string[],
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   const xRange = parsed.xRange ?? { min: -10, max: 10 };
   const samples = 200;
@@ -1103,19 +1057,13 @@ function buildFunctionOption(
         },
       }),
       emphasis: EMPHASIS_SELF,
+      blur: BLUR_DIM,
     };
   });
 
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'axis',
-      ...tooltipTheme,
-      axisPointer: {
-        type: 'cross',
-      },
-    },
     legend: {
       data: (parsed.functions ?? []).map((fn) => fn.name),
       bottom: 10,
@@ -1499,8 +1447,7 @@ function buildScatterOption(
   gridOpacity: number,
   colors: string[],
   bg: string,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   const points = parsed.scatterPoints ?? [];
   const defaultSize = 15;
@@ -1522,11 +1469,9 @@ function buildScatterOption(
 
   const emphasisConfig = {
     focus: 'self' as const,
-    itemStyle: {
-      shadowBlur: 10,
-      shadowColor: 'rgba(0, 0, 0, 0.3)',
-    },
+    itemStyle: { opacity: 1 },
   };
+  const blurConfig = BLUR_DIM;
 
   // Build series based on whether categories are present
   let series;
@@ -1567,6 +1512,7 @@ function buildScatterOption(
         },
         label: labelConfig,
         emphasis: emphasisConfig,
+        blur: blurConfig,
       };
     });
   } else {
@@ -1593,30 +1539,11 @@ function buildScatterOption(
         data,
         label: labelConfig,
         emphasis: emphasisConfig,
+        blur: blurConfig,
       },
     ];
   }
 
-  // Tooltip adapts to available data
-  const tooltip = {
-    trigger: 'item' as const,
-    ...tooltipTheme,
-    formatter: (params: unknown) => {
-      const p = params as {
-        seriesName: string;
-        name: string;
-        value: number[];
-      };
-      const xLabel = parsed.xlabel || 'x';
-      const yLabel = parsed.ylabel || 'y';
-      let html = `<strong>${p.name}</strong>`;
-      if (hasCategories) html += `<br/>${p.seriesName}`;
-      html += `<br/>${xLabel}: ${p.value[0]}<br/>${yLabel}: ${p.value[1]}`;
-      if (hasSize) html += `<br/>${parsed.sizelabel || 'size'}: ${p.value[2]}`;
-      return html;
-    },
-  };
-
   // Auto-fit axes to data range with ~10% padding
   const xValues = points.map((p) => p.x);
   const yValues = points.map((p) => p.y);
@@ -1716,7 +1643,6 @@ function buildScatterOption(
     ...CHART_BASE,
     title: titleConfig,
     ...(legendConfig && { legend: legendConfig }),
-    tooltip,
     grid: {
       left: `${gridLeft}%`,
       right: `${gridRight}%`,
@@ -1788,8 +1714,7 @@ function buildHeatmapOption(
   isDark: boolean,
   textColor: string,
   axisLineColor: string,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   const bg = isDark ? palette.surface : palette.bg;
   const heatmapRows = parsed.heatmapRows ?? [];
@@ -1812,16 +1737,6 @@ function buildHeatmapOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-      formatter: (params: unknown) => {
-        const p = params as { data: [number, number, number] };
-        const colName = columns[p.data[0]] ?? p.data[0];
-        const rowName = rowLabels[p.data[1]] ?? p.data[1];
-        return `${rowName} / ${colName}: <strong>${p.data[2]}</strong>`;
-      },
-    },
     grid: {
       left: '3%',
       right: '10%',
@@ -1892,11 +1807,8 @@ function buildHeatmapOption(
         },
         emphasis: {
           ...EMPHASIS_SELF,
-          itemStyle: {
-            shadowBlur: 10,
-            shadowColor: 'rgba(0, 0, 0, 0.5)',
-          },
         },
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -1910,12 +1822,10 @@ function buildFunnelOption(
   textColor: string,
   colors: string[],
   bg: string,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   // Sort data descending by value for funnel ordering
   const sorted = [...parsed.data].sort((a, b) => b.value - a.value);
-  const topValue = sorted.length > 0 ? sorted[0].value : 1;
 
   const data = sorted.map((d) => {
     const stroke = d.color ?? colors[parsed.data.indexOf(d) % colors.length];
@@ -1955,25 +1865,6 @@ function buildFunnelOption(
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-      formatter: (params: unknown) => {
-        const p = params as { name: string; value: number; dataIndex: number };
-        const val = p.value;
-        const prev = prevValueMap.get(p.name) ?? val;
-        const isFirst = p.dataIndex === 0;
-        if (isFirst) return '';
-        const parts: string[] = [];
-        const stepDrop = ((1 - val / prev) * 100).toFixed(1);
-        parts.push(`Step drop-off: ${stepDrop}%`);
-        if (topValue > 0) {
-          const totalDrop = ((1 - val / topValue) * 100).toFixed(1);
-          parts.push(`Overall drop-off: ${totalDrop}%`);
-        }
-        return parts.join('<br/>');
-      },
-    },
     series: [
       {
         type: 'funnel',
@@ -1992,10 +1883,8 @@ function buildFunnelOption(
         },
         emphasis: {
           ...EMPHASIS_SELF,
-          label: {
-            fontSize: 15,
-          },
         },
+        blur: BLUR_DIM,
         data,
       },
       {
@@ -2144,7 +2033,6 @@ export function buildSimpleChartOption(
     gridOpacity,
     colors,
     titleConfig,
-    tooltipTheme,
   } = buildChartCommons(parsed, palette, isDark);
   const bg = isDark ? palette.surface : palette.bg;
 
@@ -2159,7 +2047,6 @@ export function buildSimpleChartOption(
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case 'bar-stacked':
@@ -2172,7 +2059,6 @@ export function buildSimpleChartOption(
         colors,
         bg,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case 'line':
@@ -2186,7 +2072,6 @@ export function buildSimpleChartOption(
             gridOpacity,
             colors,
             titleConfig,
-            tooltipTheme,
             chartWidth
           )
         : buildLineOption(
@@ -2197,7 +2082,6 @@ export function buildSimpleChartOption(
             splitLineColor,
             gridOpacity,
             titleConfig,
-            tooltipTheme,
             chartWidth
           );
     case 'area':
@@ -2209,7 +2093,6 @@ export function buildSimpleChartOption(
         splitLineColor,
         gridOpacity,
         titleConfig,
-        tooltipTheme,
         chartWidth
       );
     case 'pie':
@@ -2219,7 +2102,6 @@ export function buildSimpleChartOption(
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         false
       );
     case 'doughnut':
@@ -2229,7 +2111,6 @@ export function buildSimpleChartOption(
         getSegmentColors(palette, parsed.data.length),
         bg,
         titleConfig,
-        tooltipTheme,
         true
       );
     case 'radar':
@@ -2239,8 +2120,7 @@ export function buildSimpleChartOption(
         isDark,
         textColor,
         gridOpacity,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
     case 'polar-area':
       return buildPolarAreaOption(
@@ -2248,8 +2128,7 @@ export function buildSimpleChartOption(
         textColor,
         getSegmentColors(palette, parsed.data.length),
         bg,
-        titleConfig,
-        tooltipTheme
+        titleConfig
       );
   }
 }
@@ -2262,9 +2141,11 @@ function makeChartGrid(options: {
   yLabel?: string;
   hasTitle: boolean;
   hasLegend?: boolean;
+  isHorizontal?: boolean;
 }): Record<string, unknown> {
+  const left = options.yLabel ? '12%' : '3%';
   return {
-    left: options.yLabel ? '12%' : '3%',
+    left,
     right: '4%',
     bottom: options.hasLegend ? '15%' : options.xLabel ? '10%' : '3%',
     top: options.hasTitle ? '15%' : '5%',
@@ -2272,6 +2153,23 @@ function makeChartGrid(options: {
   };
 }
 
+/** Wrap a label string at word boundaries to fit within `maxChars` per line. */
+function wrapLabel(text: string, maxChars: number): string {
+  const words = text.split(' ');
+  const lines: string[] = [];
+  let current = '';
+  for (const word of words) {
+    if (current && current.length + 1 + word.length > maxChars) {
+      lines.push(current);
+      current = word;
+    } else {
+      current = current ? current + ' ' + word : word;
+    }
+  }
+  if (current) lines.push(current);
+  return lines.join('\n');
+}
+
 // ── Bar ──────────────────────────────────────────────────────
 
 function buildBarOption(
@@ -2283,7 +2181,6 @@ function buildBarOption(
   colors: string[],
   bg: string,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
@@ -2301,12 +2198,16 @@ function buildBarOption(
     };
   });
 
-  // When category labels are on the y-axis (horizontal bars), they can be wide —
-  // compute a nameGap that clears the longest label so the ylabel doesn't overlap.
+  // For horizontal bars, wrap long category labels at word boundaries so they
+  // don't consume too much horizontal space on the y-axis.
+  const catLabels = isHorizontal ? labels.map((l) => wrapLabel(l, 12)) : labels;
+
+  // Compute the max visible line width after wrapping for nameGap calculation.
+  const maxVisibleLen = Math.max(
+    ...catLabels.map((l) => Math.max(...l.split('\n').map((seg) => seg.length)))
+  );
   const hCatGap =
-    isHorizontal && yLabel
-      ? Math.max(40, Math.max(...labels.map((l) => l.length)) * 8 + 16)
-      : undefined;
+    isHorizontal && yLabel ? Math.max(40, maxVisibleLen * 8 + 16) : undefined;
   const categoryAxis = makeGridAxis(
     'category',
     textColor,
@@ -2314,17 +2215,22 @@ function buildBarOption(
     splitLineColor,
     gridOpacity,
     isHorizontal ? yLabel : xLabel,
-    labels,
+    catLabels,
     hCatGap,
     !isHorizontal ? chartWidth : undefined
   );
+  // For horizontal bars, the xlabel sits on the value axis (bottom).
+  // Use a moderate nameGap so it doesn't drift.
+  const hValueGap = isHorizontal && xLabel ? 40 : undefined;
   const valueAxis = makeGridAxis(
     'value',
     textColor,
     axisLineColor,
     splitLineColor,
     gridOpacity,
-    isHorizontal ? xLabel : yLabel
+    isHorizontal ? xLabel : yLabel,
+    undefined,
+    hValueGap
   );
 
   // xAxis is always the bottom axis, yAxis is always the left axis in ECharts
@@ -2332,14 +2238,20 @@ function buildBarOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
+    grid: makeChartGrid({
+      xLabel,
+      yLabel,
+      hasTitle: !!parsed.title,
+      isHorizontal,
+    }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series: [
       {
         type: 'bar',
         data,
         emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -2369,7 +2281,7 @@ function buildMarkArea(
   if (eras.length === 0) return undefined;
   return {
     silent: false,
-    tooltip: { show: true },
+    tooltip: { show: false },
     data: eras.map((era) => {
       const startIdx = labels.indexOf(era.start);
       const endIdx = labels.indexOf(era.end);
@@ -2404,7 +2316,6 @@ function buildLineOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
@@ -2419,11 +2330,6 @@ function buildLineOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'axis',
-      ...tooltipTheme,
-      axisPointer: { type: 'line' },
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       'category',
@@ -2454,6 +2360,7 @@ function buildLineOption(
         lineStyle: { color: lineColor, width: 3 },
         itemStyle: { color: lineColor },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...(markArea && { markArea }),
       },
     ],
@@ -2471,7 +2378,6 @@ function buildMultiLineOption(
   gridOpacity: number,
   colors: string[],
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
@@ -2495,6 +2401,7 @@ function buildMultiLineOption(
       lineStyle: { color, width: 3 },
       itemStyle: { color },
       emphasis: EMPHASIS_LINE,
+      blur: BLUR_DIM,
       ...(idx === 0 && markArea && { markArea }),
     };
   });
@@ -2502,11 +2409,6 @@ function buildMultiLineOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'axis',
-      ...tooltipTheme,
-      axisPointer: { type: 'line' },
-    },
     legend: {
       data: seriesNames,
       bottom: 10,
@@ -2552,7 +2454,6 @@ function buildAreaOption(
   splitLineColor: string,
   gridOpacity: number,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
@@ -2567,11 +2468,6 @@ function buildAreaOption(
   return {
     ...CHART_BASE,
     title: titleConfig,
-    tooltip: {
-      trigger: 'axis',
-      ...tooltipTheme,
-      axisPointer: { type: 'line' },
-    },
     grid: makeChartGrid({ xLabel, yLabel, hasTitle: !!parsed.title }),
     xAxis: makeGridAxis(
       'category',
@@ -2603,6 +2499,7 @@ function buildAreaOption(
         itemStyle: { color: lineColor },
         areaStyle: { opacity: 0.25 },
         emphasis: EMPHASIS_LINE,
+        blur: BLUR_DIM,
         ...(markArea && { markArea }),
       },
     ],
@@ -2665,7 +2562,6 @@ function buildPieOption(
   colors: string[],
   bg: string,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   isDoughnut: boolean
 ): EChartsOption {
   const HIDE_AXES = { xAxis: { show: false }, yAxis: { show: false } };
@@ -2688,10 +2584,6 @@ function buildPieOption(
     ...CHART_BASE,
     ...HIDE_AXES,
     title: titleConfig,
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-    },
     series: [
       {
         type: 'pie',
@@ -2708,6 +2600,7 @@ function buildPieOption(
         },
         labelLine: { show: true },
         emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -2721,8 +2614,7 @@ function buildRadarOption(
   isDark: boolean,
   textColor: string,
   gridOpacity: number,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   const bg = isDark ? palette.surface : palette.bg;
   const radarColor =
@@ -2740,10 +2632,6 @@ function buildRadarOption(
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-    },
     radar: {
       indicator,
       axisName: {
@@ -2781,6 +2669,7 @@ function buildRadarOption(
           },
         ],
         emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -2793,8 +2682,7 @@ function buildPolarAreaOption(
   textColor: string,
   colors: string[],
   bg: string,
-  titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>
+  titleConfig: EChartsOption['title']
 ): EChartsOption {
   const data = parsed.data.map((d, i) => {
     const stroke = d.color ?? colors[i % colors.length];
@@ -2814,10 +2702,6 @@ function buildPolarAreaOption(
     title: titleConfig,
     xAxis: { show: false },
     yAxis: { show: false },
-    tooltip: {
-      trigger: 'item',
-      ...tooltipTheme,
-    },
     series: [
       {
         type: 'pie',
@@ -2836,6 +2720,7 @@ function buildPolarAreaOption(
         },
         labelLine: { show: true },
         emphasis: EMPHASIS_SELF,
+        blur: BLUR_DIM,
       },
     ],
   };
@@ -2852,7 +2737,6 @@ function buildBarStackedOption(
   colors: string[],
   bg: string,
   titleConfig: EChartsOption['title'],
-  tooltipTheme: Record<string, unknown>,
   chartWidth?: number
 ): EChartsOption {
   const { xLabel, yLabel } = resolveAxisLabels(parsed);
@@ -2884,7 +2768,8 @@ function buildBarStackedOption(
         fontWeight: 'bold' as const,
         fontFamily: FONT_FAMILY,
       },
-      emphasis: EMPHASIS_SELF,
+      emphasis: EMPHASIS_SERIES,
+      blur: BLUR_DIM,
     };
   });
 
@@ -2932,7 +2817,7 @@ function buildBarStackedOption(
       hasLegend: true,
     }),
     xAxis: isHorizontal ? valueAxis : categoryAxis,
-    yAxis: isHorizontal ? categoryAxis : valueAxis,
+    yAxis: isHorizontal ? { ...categoryAxis, inverse: true } : valueAxis,
     series,
   };
 }