fix(react-charting): resolve overlapping bars issue in histogram (#33695

)
microsoft · Jan 21, 2025 · 08575f8 · 08575f8
1 parent 5afd9da
commit 08575f8
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 4 deletions.
diff --git a/change/@fluentui-react-charting-11f4c890-d9e5-4e7e-afde-fbfc66beb0d7.json b/change/@fluentui-react-charting-11f4c890-d9e5-4e7e-afde-fbfc66beb0d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: resolve overlapping bars issue in histogram",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx b/packages/charts/react-charting/src/components/DeclarativeChart/DeclarativeChart.tsx
@@ -179,7 +179,7 @@ export const DeclarativeChart: React.FunctionComponent<DeclarativeChartProps> =
     (opts?: IImageExportOptions) => {
       return toImage(chartRef.current?.chartContainer, {
         background: theme.semanticColors.bodyBackground,
-        scale: 3,
+        scale: 5,
         ...opts,
       });
     },

diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -444,7 +444,6 @@ export const transformPlotlyJsonToVBCProps = (
     data: vbcData,
     // width: layout?.width,
     // height: layout?.height,
-    barWidth: 24,
     supportNegativeData: true,
     chartTitle,
     xAxisTitle,

diff --git a/...harting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap b/...harting/src/components/DeclarativeChart/__snapshots__/PlotlySchemaAdapterUT.test.tsx.snap
@@ -4571,7 +4571,6 @@ Object {
 
 exports[`transform Plotly Json To chart Props transformPlotlyJsonToVBCProps - Should return VBC props 1`] = `
 Object {
-  "barWidth": 24,
   "chartTitle": "",
   "data": Array [
     Object {

diff --git a/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx
@@ -1272,7 +1272,15 @@ export class VerticalBarChartBase
         this._domainMargin = MIN_DOMAIN_MARGIN + Math.max(0, Math.min(margin1, margin2));
       }
     } else {
-      const data = (this.props.data?.map(point => point.x) as number[] | Date[] | undefined) || [];
+      const uniqueX: Record<number, number | Date> = {};
+      this.props.data?.forEach(point => {
+        if (point.x instanceof Date) {
+          uniqueX[point.x.getTime()] = point.x;
+        } else {
+          uniqueX[point.x as number] = point.x as number;
+        }
+      });
+      const data = Object.values(uniqueX) as number[] | Date[];
       this._barWidth = getBarWidth(
         this.props.barWidth,
         this.props.maxBarWidth,