@antv/gpt-vis 1.0.0 → 1.0.1

package/dist/cjs/vis/line/index.js

@@ -23,20 +23,40 @@ __export(line_exports, {
 });
 module.exports = __toCommonJS(line_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Line = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
+  let cleanupCrosshairAxisLabels = null;
   const render = (config) => {
     var _a;
     const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
     }
-    const { lineWidth = 2 } = style;
+    const { lineWidth = import_util.CHART_STYLE_DEFAULTS.lineWidth } = style;
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
+    const tooltip = {
+      items: [
+        (d) => ({
+          name: hasGroupField ? d.group : axisYTitle || d.time,
+          value: d.value
+        })
+      ]
+    };
+    const lineAnimation = (0, import_util.getChartAnimation)(hasRendered, "pathIn");
+    const pointAnimation = (0, import_util.getChartAnimation)(hasRendered, "fadeIn");
+    const cartesianAxisOptions = {
+      axisXTitle,
+      axisYTitle,
+      xLabels: data.map(({ time }) => time),
+      chartWidth: width
+    };
     chart = new import_g2.Chart({
       container,
       width,
@@ -51,48 +71,68 @@ var Line = (options) => {
     } else {
       encode = { x: "time", y: "value" };
     }
+    const children = [
+      {
+        type: "line",
+        tooltip,
+        style: {
+          lineWidth,
+          lineCap: "round",
+          lineJoin: "round",
+          ...!hasGroupField ? { stroke: colors[0] } : {}
+        },
+        animate: lineAnimation
+      }
+    ];
+    const showPoints = data.length <= (hasGroupField ? 36 : 24);
+    if (showPoints) {
+      children.push({
+        type: "point",
+        encode: {
+          x: "time",
+          y: "value",
+          shape: "point",
+          size: import_util.CHART_STYLE_DEFAULTS.pointSize,
+          ...hasGroupField ? { color: "group" } : {}
+        },
+        animate: pointAnimation,
+        tooltip: false,
+        style: {
+          lineWidth: import_util.CHART_STYLE_DEFAULTS.pointLineWidth,
+          stroke: backgroundColor,
+          ...!hasGroupField ? { fill: colors[0] } : {}
+        }
+      });
+    }
     const chartOptions = {
-      animate: false,
       type: "view",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
-      children: [
-        {
-          type: "line",
-          style: {
-            lineWidth,
-            ...!hasGroupField && style.palette ? { stroke: colors[0] } : {}
-          }
-        }
-      ],
+      children,
       scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle || false },
-        y: { title: axisYTitle || false }
-      },
-      legend: hasGroupField ? { color: { position: "top" } } : false,
-      tooltip: {
-        items: [
-          (d) => ({
-            name: axisYTitle || d.time,
-            value: d.value
-          })
-        ]
-      },
-      viewStyle: {
-        viewFill: backgroundColor
+      ...(0, import_util.getCartesianLayout)(cartesianAxisOptions),
+      axis: (0, import_util.getCartesianAxis)(cartesianAxisOptions),
+      legend: (0, import_util.getColorLegend)(hasGroupField),
+      interaction: {
+        tooltip: (0, import_util.getSharedTooltipInteraction)({ crosshairs: true })
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
+    cleanupCrosshairAxisLabels = (0, import_util.bindCrosshairAxisLabels)(chart, theme);
     chart.render();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
+      cleanupCrosshairAxisLabels == null ? void 0 : cleanupCrosshairAxisLabels();
+      cleanupCrosshairAxisLabels = null;
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

package/dist/cjs/vis/liquid/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * LiquidConfig defines the configuration for rendering the liquid chart.
  */
@@ -6,7 +6,7 @@ export interface LiquidConfig {
     type?: 'liquid';
     percent: number;
     shape?: 'rect' | 'circle' | 'pin' | 'triangle';
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;

package/dist/cjs/vis/liquid/index.js

@@ -23,7 +23,7 @@ __export(liquid_exports, {
 });
 module.exports = __toCommonJS(liquid_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var DEFAULT_WIDTH = 640;
 var DEFAULT_HEIGHT = 480;
 var Liquid = (options) => {
@@ -34,10 +34,18 @@ var Liquid = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
+    const tokens = (0, import_util.getChartVisualTokens)(theme);
+    const normalizedPercent = Number.isFinite(percent) ? Math.max(0, Math.min(1, percent)) : 0;
     const inferFontSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT) / 10;
     const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
+    const chartSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT);
+    const waveLength = Math.min(Math.max(chartSize * 0.4, 96), 192);
+    const formattedPercent = `${Number((normalizedPercent * 100).toFixed(1))}%`;
+    const liquidColor = colors[0];
+    const isAcademy = theme === "academy";
+    const outlineShadowColor = theme === "dark" ? "rgba(0, 0, 0, 0.32)" : "rgba(15, 23, 42, 0.10)";
     chart = new import_g2.Chart({
       container,
       width,
@@ -47,25 +55,42 @@ var Liquid = (options) => {
     const chartOptions = {
       animate: false,
       type: "liquid",
-      data: percent,
-      title: title ?? "",
+      data: normalizedPercent,
+      title: title || "",
+      inset: 20,
       style: {
         shape,
+        contentText: formattedPercent,
         contentFontSize: fontSize,
-        contentFill: "#000",
-        contentStroke: "#fff",
-        contentLineWidth: 2,
-        outlineBorder: 4,
-        outlineDistance: 4,
-        waveLength: 128,
+        contentFill: tokens.textPrimary,
+        contentStroke: backgroundColor,
+        contentStrokeOpacity: 0.92,
+        contentLineWidth: theme === "dark" ? 3 : 2.5,
+        contentFontFamily: import_util.CHART_FONT_FAMILY,
+        contentFontWeight: 600,
+        contentLetterSpacing: -0.8,
+        contentFontVariantNumeric: "tabular-nums",
+        contentPaintOrder: "stroke",
+        backgroundFill: liquidColor,
+        backgroundFillOpacity: theme === "dark" ? 0.14 : isAcademy ? 0.06 : 0.08,
+        backgroundStroke: liquidColor,
+        backgroundStrokeOpacity: theme === "dark" ? 0.3 : 0.22,
+        backgroundLineWidth: 1,
+        outlineBorder: isAcademy ? 1.5 : 2,
+        outlineDistance: 0,
+        outlineStrokeOpacity: isAcademy ? 0.9 : 0.72,
+        outlineShadowColor: isAcademy ? "transparent" : outlineShadowColor,
+        outlineShadowBlur: isAcademy ? 0 : 6,
+        outlineShadowOffsetY: isAcademy ? 0 : 2,
+        waveLength,
+        waveCount: 2,
+        fillOpacity: isAcademy ? 0.9 : 0.88,
         contentPointerEvents: "none",
         // Use palette color if provided
-        ...colors[0] ? { fill: colors[0], outlineStroke: colors[0] } : {}
+        ...liquidColor ? { fill: liquidColor, outlineStroke: liquidColor } : {}
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
-      theme: (0, import_theme.getThemeObject)(theme),
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme),
       tooltip: false
     };
     chart.options(chartOptions);

package/dist/cjs/vis/pie/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * PieDataItem is the type for each data item in the pie chart.
  */
@@ -13,7 +13,7 @@ export interface PieConfig {
     type?: 'pie';
     data: PieDataItem[];
     innerRadius?: number;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     title?: string;
     style?: {
         backgroundColor?: string;

package/dist/cjs/vis/pie/index.js

@@ -23,18 +23,19 @@ __export(pie_exports, {
 });
 module.exports = __toCommonJS(pie_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Pie = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const PERCENTAGE_PRECISION_MULTIPLIER = 1e4;
   const render = (config) => {
     const { data = [], innerRadius = 0, theme = chartTheme, title, style = {} } = config;
     if (chart) {
       chart.destroy();
     }
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const tokens = (0, import_util.getChartVisualTokens)(theme);
     const sumValue = data.reduce((sum, item) => sum + item.value, 0);
     chart = new import_g2.Chart({
       container,
@@ -43,10 +44,10 @@ var Pie = (options) => {
       autoFit: true
     });
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "waveIn"),
       type: "interval",
       data,
-      title: title ?? "",
+      title: title || "",
       encode: {
         y: "value",
         color: "category"
@@ -56,14 +57,13 @@ var Pie = (options) => {
       scale: {
         color: { range: colors }
       },
-      legend: {
-        color: { position: "top" }
-      },
-      labels: [
+      legend: (0, import_util.getColorLegend)(true),
+      labels: data.length > 8 ? [] : [
         {
           text: (d) => {
-            const percentage = Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER;
-            return `${d.category}: ${percentage}%`;
+            const percentage = sumValue ? Math.round(d.value / sumValue * 100 * PERCENTAGE_PRECISION_MULTIPLIER) / PERCENTAGE_PRECISION_MULTIPLIER : 0;
+            const formattedPercentage = Number(percentage.toFixed(1)).toString();
+            return `${d.category}: ${formattedPercentage}%`;
           },
           position: "outside",
           transform: [{ type: "overlapHide" }]
@@ -78,24 +78,34 @@ var Pie = (options) => {
         ]
       },
       interaction: {
+        tooltip: true,
+        elementHighlight: true,
+        elementHoverScale: { shadow: false },
         elementSelect: { single: true }
       },
-      style: {
-        fillOpacity: 0.8
+      state: {
+        active: { fillOpacity: 1, lineWidth: 3 },
+        inactive: { fillOpacity: 0.3 },
+        selected: { fillOpacity: 1, lineWidth: 3 }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      style: {
+        fillOpacity: 1,
+        stroke: tokens.separator,
+        lineWidth: 2
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

package/dist/cjs/vis/radar/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * RadarDataItem is the type for each data item in the radar chart.
  */
@@ -15,7 +15,7 @@ export interface RadarConfig {
     data: RadarDataItem[];
     title?: string;
     align?: boolean;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

package/dist/cjs/vis/radar/index.js

@@ -23,7 +23,7 @@ __export(radar_exports, {
 });
 module.exports = __toCommonJS(radar_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 function transformRadarToParallel(data) {
   if (!data || data.length === 0) {
     return [];
@@ -55,11 +55,12 @@ var Radar = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const { lineWidth = 2 } = style;
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const { lineWidth = import_util.CHART_STYLE_DEFAULTS.lineWidth } = style;
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
     const parallelData = transformRadarToParallel(data);
     const position = Object.keys(parallelData[0] || {}).filter((key) => key !== "group");
+    const hasMultipleSeries = parallelData.length > 1;
+    const legend = (0, import_util.getColorLegend)(hasMultipleSeries);
     chart = new import_g2.Chart({
       container,
       width,
@@ -70,9 +71,9 @@ var Radar = (options) => {
       animate: false,
       type: "line",
       data: parallelData,
-      title: title ?? "",
+      title: title || "",
       coordinate: { type: "radar" },
-      inset: 18,
+      inset: 24,
       encode: {
         position,
         color: "group"
@@ -96,42 +97,33 @@ var Radar = (options) => {
         Array.from({ length: position.length }, (_, i) => [
           `position${i === 0 ? "" : i}`,
           {
-            zIndex: 1,
-            titleFontSize: 10,
-            titleSpacing: 8,
-            label: true,
-            labelFill: theme === "dark" ? "#fff" : "#000",
-            labelOpacity: 0.45,
-            labelFontSize: 10,
-            line: true,
-            lineFill: "#000",
-            lineStrokeOpacity: 0.25,
+            label: align ? i === 0 : true,
             tickFilter: (_2, idx) => {
               return !(i !== 0 && idx === 0);
             },
-            tickCount: 4,
-            gridStrokeOpacity: 0.45,
-            gridStroke: theme === "dark" ? "#fff" : "#000",
-            gridLineWidth: 1,
-            gridLineDash: [4, 4]
+            grid: i === 0
           }
         ])
       ),
       style: {
         lineWidth,
         lineCap: "round",
-        lineJoin: "round"
+        lineJoin: "round",
+        strokeOpacity: import_util.CHART_STYLE_DEFAULTS.lineOpacity
       },
-      legend: parallelData.length > 1 ? { color: { position: "top", itemMarker: "point" } } : false,
-      interaction: {
-        tooltip: {
-          series: false
+      state: hasMultipleSeries ? (0, import_util.getLineHighlightState)(lineWidth) : void 0,
+      legend: legend === false ? false : {
+        color: {
+          ...legend.color,
+          itemMarker: "smooth"
         }
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: true,
+        ...hasMultipleSeries ? (0, import_util.getSeriesHighlightByColorInteraction)() : {}
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();

package/dist/cjs/vis/sankey/index.js

@@ -33,7 +33,6 @@ var Sankey = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
       width,
@@ -67,9 +66,7 @@ var Sankey = (options) => {
         nodeLineWidth: 1,
         linkFillOpacity: 0.3
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       legend: false,
       tooltip: false

package/dist/cjs/vis/scatter/index.d.ts

@@ -1,4 +1,4 @@
-import type { VisualizationOptions } from '../../types';
+import type { VisualizationOptions, VisualizationTheme } from '../../types';
 /**
  * ScatterDataItem is the type for each data item in the scatter chart.
  */
@@ -16,7 +16,7 @@ export interface ScatterConfig {
     title?: string;
     axisXTitle?: string;
     axisYTitle?: string;
-    theme?: 'default' | 'academy' | 'dark';
+    theme?: VisualizationTheme;
     style?: {
         backgroundColor?: string;
         palette?: string[];

package/dist/cjs/vis/scatter/index.js

@@ -23,18 +23,19 @@ __export(scatter_exports, {
 });
 module.exports = __toCommonJS(scatter_exports);
 var import_g2 = require("@antv/g2");
-var import_theme = require("../../util/theme");
+var import_util = require("../../util");
 var Scatter = (options) => {
   const { container, width, height, theme: chartTheme = "default" } = options;
   let chart = null;
+  let hasRendered = false;
   const render = (config) => {
     var _a;
     const { data = [], theme = chartTheme, title, axisXTitle, axisYTitle, style = {} } = config;
     if (chart) {
       chart.destroy();
     }
-    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const colors = (0, import_util.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_util.getBackgroundColor)(theme);
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
     chart = new import_g2.Chart({
       container,
@@ -44,29 +45,47 @@ var Scatter = (options) => {
     });
     let encode = {};
     const scaleConfig = {
-      y: { nice: true }
+      y: { nice: true },
+      x: { nice: true }
     };
     if (hasGroupField) {
-      encode = { x: "x", y: "y", color: "group" };
+      encode = {
+        x: "x",
+        y: "y",
+        color: "group",
+        shape: "point",
+        size: import_util.CHART_STYLE_DEFAULTS.scatterPointSize
+      };
       scaleConfig.color = { range: colors };
     } else {
-      encode = { x: "x", y: "y", color: () => "all" };
+      encode = {
+        x: "x",
+        y: "y",
+        shape: "point",
+        size: import_util.CHART_STYLE_DEFAULTS.scatterPointSize
+      };
     }
     const chartOptions = {
-      animate: false,
+      animate: (0, import_util.getChartAnimation)(hasRendered, "fadeIn"),
       type: "point",
       data,
-      title: title ?? "",
+      title: title || "",
       encode,
-      legend: hasGroupField ? { color: { position: "top" } } : false,
+      legend: (0, import_util.getColorLegend)(hasGroupField),
       scale: scaleConfig,
-      axis: {
-        x: { title: axisXTitle ?? "x" },
-        y: { title: axisYTitle ?? "y" }
-      },
+      axis: (0, import_util.getCartesianAxis)({
+        axisXTitle,
+        axisYTitle
+      }),
       style: {
-        lineWidth: 1
+        lineWidth: import_util.CHART_STYLE_DEFAULTS.pointLineWidth,
+        fillOpacity: 0.88,
+        stroke: backgroundColor,
+        ...!hasGroupField ? { fill: colors[0] } : {}
       },
+      // A same-color stroke enlarges the rendered path without changing its transform or
+      // hit area, so repeated pointer events cannot accumulate scale.
+      state: (0, import_util.getPointHighlightState)(),
       tooltip: {
         title: (d) => (d == null ? void 0 : d.group) ? d.group : false,
         items: [
@@ -74,19 +93,23 @@ var Scatter = (options) => {
           { channel: "y", name: axisYTitle ?? "y" }
         ]
       },
-      viewStyle: {
-        viewFill: backgroundColor
+      interaction: {
+        tooltip: true,
+        elementHighlight: true
       },
-      theme: (0, import_theme.getThemeObject)(theme)
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
+      theme: (0, import_util.getThemeObject)(theme)
     };
     chart.options(chartOptions);
     chart.render();
+    hasRendered = true;
   };
   const destroy = () => {
     if (chart) {
       chart.destroy();
       chart = null;
     }
+    hasRendered = false;
   };
   return {
     render,

package/dist/cjs/vis/treemap/index.js

@@ -33,7 +33,6 @@ var Treemap = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
       width,
@@ -74,9 +73,7 @@ var Treemap = (options) => {
           }
         ]
       },
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       scale: {
         ...colors.length > 0 ? {

package/dist/cjs/vis/venn/index.js

@@ -43,7 +43,6 @@ var Venn = (options) => {
       chart.destroy();
     }
     const colors = (0, import_theme.normalizePalette)(style.palette, theme);
-    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const normalizedData = data.map((d) => ({
       ...d,
       sets: normalizeVennSets(d.sets)
@@ -87,9 +86,7 @@ var Venn = (options) => {
           fontSize: 10
         }
       ],
-      viewStyle: {
-        viewFill: backgroundColor
-      },
+      viewStyle: style.backgroundColor ? { viewFill: style.backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme),
       legend: false,
       axis: false,

package/dist/cjs/vis/violin/index.js

@@ -133,7 +133,7 @@ var Violin = (options) => {
       legend: {
         color: hasGroupField ? { position: "top" } : false
       },
-      ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);

package/dist/cjs/vis/waterfall/index.js

@@ -172,7 +172,7 @@ var Waterfall = (options) => {
         }
       ],
       legend: false,
-      ...backgroundColor ? { viewStyle: { viewFill: backgroundColor } } : {},
+      viewStyle: style.backgroundColor ? { viewFill: backgroundColor } : void 0,
       theme: (0, import_theme.getThemeObject)(theme)
     };
     chart.options(chartOptions);