fix(react-charting): Use schema colorscale for Grouped Vertical Bar chart (#34530)

srmukher · web-flow · commit 14cd5d59f87a · 2025-05-30T22:42:41.000+05:30
diff --git a/change/@fluentui-chart-utilities-e29979b9-774d-4f59-9f17-f8ec2de0c7b6.json b/change/@fluentui-chart-utilities-e29979b9-774d-4f59-9f17-f8ec2de0c7b6.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(chart-utilities): Exporting ColorAxis type",
+  "packageName": "@fluentui/chart-utilities",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-charting-099fd5fb-561a-4e2a-8b82-c2900ebafbfb.json b/change/@fluentui-react-charting-099fd5fb-561a-4e2a-8b82-c2900ebafbfb.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix(react-charting): Use colorscale for Grouped Vertical Bar chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "120183316+srmukher@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/charts/chart-utilities/etc/chart-utilities.api.md b/packages/charts/chart-utilities/etc/chart-utilities.api.md
@@ -166,6 +166,29 @@ export type Calendar = 'gregorian' | 'chinese' | 'coptic' | 'discworld' | 'ethio
 // @public (undocumented)
 export type Color = string | number | Array<string | number | undefined | null> | Array<Array<string | number | undefined | null>>;
 
+// @public (undocumented)
+export interface ColorAxis {
+    // (undocumented)
+    cmax?: number;
+    // (undocumented)
+    cmin?: number;
+    // (undocumented)
+    colorbar?: {
+        title?: string | {
+            text: string;
+        };
+        thickness?: number;
+        len?: number;
+        outlinewidth?: number;
+    };
+    // (undocumented)
+    colorscale?: Array<[number, string]>;
+    // (undocumented)
+    reversescale?: boolean;
+    // (undocumented)
+    showscale?: boolean;
+}
+
 // @public (undocumented)
 export interface ColorBar {
     // (undocumented)
diff --git a/packages/charts/chart-utilities/src/index.ts b/packages/charts/chart-utilities/src/index.ts
@@ -6,6 +6,7 @@ export type {
   AxisType,
   Calendar,
   Color,
+  ColorAxis,
   ColorBar,
   ColorScale,
   Config,
diff --git a/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts b/packages/charts/react-charting/src/components/DeclarativeChart/PlotlySchemaAdapter.ts
@@ -404,6 +404,16 @@ export const transformPlotlyJsonToVSBCProps = (
   };
 };
 
+const createColorScale = (colorscale: Array<[number, string]>, domain: [number, number]) => {
+  const [dMin, dMax] = domain;
+
+  // Normalize colorscale domain to actual data domain
+  const scaleDomain = colorscale.map(([pos]) => dMin + pos * (dMax - dMin));
+  const scaleColors = colorscale.map(item => item[1]);
+
+  return d3ScaleLinear<string>().domain(scaleDomain).range(scaleColors);
+};
+
 export const transformPlotlyJsonToGVBCProps = (
   input: PlotlySchema,
   colorMap: React.MutableRefObject<Map<string, string>>,
@@ -413,8 +423,22 @@ export const transformPlotlyJsonToGVBCProps = (
   const mapXToDataPoints: Record<string, IGroupedVerticalBarChartData> = {};
   const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout, 0, 0);
   const { legends, hideLegend } = getLegendProps(input.data, input.layout);
-
+  let colorScale: ((value: number) => string) | undefined = undefined;
   input.data.forEach((series: Partial<PlotData>, index1: number) => {
+    if (
+      input.layout?.coloraxis?.colorscale?.length &&
+      isArrayOrTypedArray(series.marker?.color) &&
+      (series.marker?.color as Color[]).length > 0 &&
+      typeof (series.marker?.color as Color[])?.[0] === 'number'
+    ) {
+      const scale = input.layout.coloraxis.colorscale as Array<[number, string]>;
+      const colorValues = series.marker?.color as number[];
+      const [dMin, dMax] = [
+        input.layout.coloraxis?.cmin ?? Math.min(...colorValues),
+        input.layout.coloraxis?.cmax ?? Math.max(...colorValues),
+      ];
+      colorScale = createColorScale(scale, [dMin, dMax]);
+    }
     // extract colors for each series only once
     const extractedColors = extractColor(
       input.layout?.template?.layout?.colorway,
@@ -434,8 +458,13 @@ export const transformPlotlyJsonToGVBCProps = (
 
       if (series.type === 'bar') {
         const legend: string = legends[index1];
-        // resolve color for each legend's bars from the extracted colors
-        const color = resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+        // resolve color for each legend's bars from the colorscale or extracted colors
+        const color = colorScale
+          ? colorScale(
+              isArrayOrTypedArray(series.marker?.color) ? ((series.marker?.color as Color[])?.[xIndex] as number) : 0,
+            )
+          : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
+
         mapXToDataPoints[x].series.push({
           key: legend,
           data: series.y![xIndex] as number,
diff --git a/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx b/packages/charts/react-charting/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.base.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { max as d3Max, min as d3Min } from 'd3-array';
 import { select as d3Select } from 'd3-selection';
 import { Axis as D3Axis } from 'd3-axis';
-import { ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
+import { scaleLinear as d3ScaleLinear, ScaleLinear, scaleBand as d3ScaleBand } from 'd3-scale';
 import {
   classNamesFunction,
   getId,
@@ -51,6 +51,7 @@ import {
 import { IChart, IImageExportOptions } from '../../types/index';
 import { toImage } from '../../utilities/image-export-utils';
 import { ILegendContainer } from '../Legends/index';
+import { rgb } from 'd3-color';
 
 const COMPONENT_NAME = 'GROUPED VERTICAL BAR CHART';
 const getClassNames = classNamesFunction<IGroupedVerticalBarChartStyleProps, IGroupedVerticalBarChartStyles>();
@@ -437,21 +438,6 @@ export class GroupedVerticalBarChartBase
         const xPoint = xScale1(legendTitle) + (xScale1.bandwidth() - this._barWidth) / 2;
         const isLegendActive = this._legendHighlighted(legendTitle) || this._noLegendHighlighted();
         const barOpacity = isLegendActive ? '' : '0.1';
-        const gradientId = getId('GVBC_Gradient') + `_${singleSet.indexNum}_${legendIndex}`;
-        let startColor = barPoints[0].color;
-        let endColor = startColor;
-
-        if (this.props.enableGradient) {
-          startColor = barPoints[0].gradient![0];
-          endColor = barPoints[0].gradient![1];
-
-          singleGroup.push(
-            <linearGradient key={gradientId} id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
-              <stop offset="0" stopColor={startColor} />
-              <stop offset="100%" stopColor={endColor} />
-            </linearGradient>,
-          );
-        }
 
         let barTotalValue = 0;
         const yBaseline = yBarScale(this.Y_ORIGIN);
@@ -464,8 +450,25 @@ export class GroupedVerticalBarChartBase
             // Not rendering data with 0.
             return;
           }
+          const gradientId = getId('GVBC_Gradient') + `_${singleSet.indexNum}_${legendIndex}_${pointIndex}`;
+          if (this.props.enableGradient) {
+            const startColor = pointData.gradient?.[0] || pointData.color;
+            const endColor = pointData.gradient?.[1] || pointData.color;
+
+            singleGroup.push(
+              <defs key={`defs_${gradientId}`}>
+                <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">
+                  <stop offset="0%" stopColor={startColor} />
+                  <stop offset="100%" stopColor={endColor} />
+                </linearGradient>
+              </defs>,
+            );
+          }
+
           const barGap = (VERTICAL_BAR_GAP / 2) * (pointIndex > 0 ? 2 : 0);
           const height = Math.max(yBarScale(this.Y_ORIGIN) - yBarScale(Math.abs(pointData.data)), MIN_BAR_HEIGHT);
+          const pointColor = pointData.color; // Use the color of the current point
+
           if (pointData.data >= this.Y_ORIGIN) {
             yPositiveStart -= height + barGap;
             yPoint = yPositiveStart;
@@ -484,7 +487,7 @@ export class GroupedVerticalBarChartBase
               y={yPoint}
               data-is-focusable={!this.props.hideTooltip && isLegendActive}
               opacity={barOpacity}
-              fill={this.props.enableGradient ? `url(#${gradientId})` : startColor}
+              fill={this.props.enableGradient ? `url(#${gradientId})` : pointColor}
               rx={this.props.roundCorners ? 3 : 0}
               onMouseOver={this._onBarHover.bind(this, pointData, singleSet)}
               onMouseMove={this._onBarHover.bind(this, pointData, singleSet)}
@@ -782,6 +785,13 @@ export class GroupedVerticalBarChartBase
     );
   };
 
+  // Lighten/Darken a color by a given percentage using d3-scale
+  private _adjustColor = (color: string, percentage: number, lightenColor: boolean, isDarkTheme: boolean): string => {
+    const targetColor = lightenColor ? (isDarkTheme ? '#000000' : '#ffffff') : isDarkTheme ? '#ffffff' : '#000000';
+    const colorInterpolator = d3ScaleLinear<string>().domain([0, 1]).range([color, targetColor]);
+    return rgb(colorInterpolator(percentage)).formatRgb();
+  };
+
   private _addDefaultColors = (data?: IGroupedVerticalBarChartData[]): IGroupedVerticalBarChartData[] => {
     this._legendColorMap = {};
     let colorIndex = 0;
@@ -792,26 +802,42 @@ export class GroupedVerticalBarChartBase
           ...point,
           series:
             point.series?.map(seriesPoint => {
-              if (!this._legendColorMap[seriesPoint.legend]) {
-                let startColor = seriesPoint.color
-                  ? seriesPoint.color
-                  : getNextColor(colorIndex, 0, this.props.theme?.isInverted);
-                let endColor = startColor;
-
-                if (this.props.enableGradient) {
+              let startColor = seriesPoint.color
+                ? seriesPoint.color
+                : getNextColor(colorIndex, 0, this.props.theme?.isInverted);
+              let endColor = startColor;
+
+              if (this.props.enableGradient) {
+                if (seriesPoint.color) {
+                  // Generate gradient colors based on seriesPoint.color
+                  startColor = this._adjustColor(
+                    seriesPoint.color || endColor,
+                    0.2,
+                    false,
+                    this.props.theme?.isInverted!,
+                  );
+                  endColor = this._adjustColor(
+                    seriesPoint.color || startColor,
+                    0.2,
+                    true,
+                    this.props.theme?.isInverted!,
+                  );
+                } else {
                   const nextGradient = getNextGradient(colorIndex, 0, this.props.theme?.isInverted);
                   startColor = seriesPoint.gradient?.[0] || nextGradient[0];
                   endColor = seriesPoint.gradient?.[1] || nextGradient[1];
                 }
-
+              }
+              const pointGradient: [string, string] = [startColor, endColor];
+              if (!this._legendColorMap[seriesPoint.legend]) {
                 this._legendColorMap[seriesPoint.legend] = [startColor, endColor];
-                colorIndex += 1;
               }
+              colorIndex += 1;
 
               return {
                 ...seriesPoint,
-                color: this._legendColorMap[seriesPoint.legend][0],
-                ...(this.props.enableGradient ? { gradient: this._legendColorMap[seriesPoint.legend] } : {}),
+                color: seriesPoint.color ?? this._legendColorMap[seriesPoint.legend][0],
+                ...(this.props.enableGradient ? { gradient: pointGradient } : {}),
               };
             }) ?? [],
         };
