@fluentui/react-charting 5.24.0 → 5.24.2

package/etc/react-charting.api.md

@@ -1015,6 +1015,7 @@ export interface ILineChartDataPoint {
     hideCallout?: boolean;
     markerSize?: number;
     onDataPointClick?: () => void;
+    text?: string;
     x: number | Date;
     xAxisCalloutAccessibilityData?: IAccessibilityProps;
     xAxisCalloutData?: string;
@@ -1082,6 +1083,8 @@ export interface ILineChartStyleProps extends ICartesianChartStyleProps {
 
 // @public
 export interface ILineChartStyles extends ICartesianChartStyles {
+    // (undocumented)
+    markerLabel?: IStyle;
 }
 
 // @public (undocumented)

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.d.ts

@@ -15,6 +15,7 @@ import type { ColorwayType } from './PlotlyColorAdapter';
 export declare const isMonthArray: (data: Datum[] | Datum[][] | TypedArray) => boolean;
 export declare const correctYearMonth: (xValues: Datum[] | Datum[][] | TypedArray) => any[];
 export declare const _getGaugeAxisColor: (colorway: string[] | undefined, colorwayType: ColorwayType, color: Color | undefined, colorMap: React.MutableRefObject<Map<string, string>>, isDarkTheme?: boolean) => string;
+export declare const resolveXAxisPoint: (x: Datum, isXYearCategory: boolean, isXString: boolean, isXDate: boolean, isXNumber: boolean) => string | Date | number;
 export declare const transformPlotlyJsonToDonutProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IDonutChartProps;
 export declare const transformPlotlyJsonToVSBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean, fallbackVSBC?: boolean) => IVerticalStackedBarChartProps;
 export declare const transformPlotlyJsonToGVBCProps: (input: PlotlySchema, colorMap: React.MutableRefObject<Map<string, string>>, colorwayType: ColorwayType, isDarkTheme?: boolean) => IGroupedVerticalBarChartProps;

package/lib/components/DeclarativeChart/PlotlySchemaAdapter.js

@@ -150,6 +150,25 @@ export var _getGaugeAxisColor = function (colorway, colorwayType, color, colorMa
     var extractedColors = extractColor(colorway, colorwayType, color, colorMap, isDarkTheme);
     return resolveColor(extractedColors, 0, '', colorMap, isDarkTheme);
 };
+export var resolveXAxisPoint = function (x, isXYearCategory, isXString, isXDate, isXNumber) {
+    if (x === null || x === undefined) {
+        return '';
+    }
+    if (isXYearCategory) {
+        return x.toString();
+    }
+    if (isXString) {
+        if (isXDate) {
+            var date = new Date(x);
+            return date;
+        }
+        if (isXNumber) {
+            return parseFloat(x);
+        }
+        return x;
+    }
+    return x;
+};
 export var transformPlotlyJsonToDonutProps = function (input, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var firstData = input.data[0];
@@ -209,26 +228,45 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
     var yMinValue = 0;
     var secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
     var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var colorScale = undefined;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         var isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
         // extract bar colors for each series only once
-        var extractedBarColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedBarColors = extractColor((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         // extract line colors for each series only once
-        var extractedLineColors = extractColor((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, (_h = series.line) === null || _h === void 0 ? void 0 : _h.color, colorMap, isDarkTheme);
+        var extractedLineColors = extractColor((_p = (_o = (_m = input.layout) === null || _m === void 0 ? void 0 : _m.template) === null || _o === void 0 ? void 0 : _o.layout) === null || _p === void 0 ? void 0 : _p.colorway, colorwayType, (_q = series.line) === null || _q === void 0 ? void 0 : _q.color, colorMap, isDarkTheme);
+        var xValues = series.x;
+        var isXDate = isDateArray(xValues);
+        var isXString = isStringArray(xValues);
+        var isXNumber = isNumberArray(xValues);
         var validXYRanges = getValidXYRanges(series);
         validXYRanges.forEach(function (_a, rangeIdx) {
             var rangeStart = _a[0], rangeEnd = _a[1];
             var rangeXValues = series.x.slice(rangeStart, rangeEnd);
             var rangeYValues = series.y.slice(rangeStart, rangeEnd);
             rangeXValues.forEach(function (x, index2) {
-                var _a, _b;
+                var _a, _b, _c, _d, _e, _f;
                 if (!mapXToDataPoints[x]) {
-                    mapXToDataPoints[x] = { xAxisPoint: isXYearCategory ? x.toString() : x, chartData: [], lineData: [] };
+                    mapXToDataPoints[x] = {
+                        xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
+                        chartData: [],
+                        lineData: [],
+                    };
                 }
                 var legend = legends[index1];
-                // resolve color for each legend's bars from the extracted colors
-                var color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
+                // resolve color for each legend's bars from the colorscale or extracted colors
+                var color = colorScale
+                    ? colorScale(isArrayOrTypedArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                        ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index2 % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                        : 0)
+                    : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
                 var yVal = rangeYValues[index2];
                 if (series.type === 'bar') {
                     mapXToDataPoints[x].chartData.push({
@@ -243,10 +281,10 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
                 else if (series.type === 'scatter' || !!fallbackVSBC) {
                     var lineColor = resolveColor(extractedLineColors, index1, legend, colorMap, isDarkTheme);
                     var lineOptions = getLineOptions(series.line);
-                    var dashType = ((_a = series.line) === null || _a === void 0 ? void 0 : _a.dash) || 'solid';
+                    var dashType = ((_e = series.line) === null || _e === void 0 ? void 0 : _e.dash) || 'solid';
                     var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
                         ? 'dottedLine'
-                        : ((_b = series.mode) === null || _b === void 0 ? void 0 : _b.includes('markers'))
+                        : ((_f = series.mode) === null || _f === void 0 ? void 0 : _f.includes('markers'))
                             ? 'circle'
                             : 'default';
                     mapXToDataPoints[x].lineData.push({
@@ -268,14 +306,20 @@ export var transformPlotlyJsonToVSBCProps = function (input, colorMap, colorwayT
     var _e = getTitles(input.layout), chartTitle = _e.chartTitle, xAxisTitle = _e.xAxisTitle, yAxisTitle = _e.yAxisTitle;
     return __assign(__assign({ data: Object.values(mapXToDataPoints), width: (_a = input.layout) === null || _a === void 0 ? void 0 : _a.width, height: (_c = (_b = input.layout) === null || _b === void 0 ? void 0 : _b.height) !== null && _c !== void 0 ? _c : 350, barWidth: 'auto', yMaxValue: yMaxValue, yMinValue: yMinValue, chartTitle: chartTitle, xAxisTitle: xAxisTitle, yAxisTitle: yAxisTitle, mode: 'plotly' }, secondaryYAxisValues), { hideTickOverlap: true, hideLegend: hideLegend, roundCorners: true, supportNegativeData: true, barGapMax: 2, showYAxisLables: true, noOfCharsToTruncate: 20, showYAxisLablesTooltip: true });
 };
-var createColorScale = function (colorscale, domain) {
-    var dMin = domain[0], dMax = domain[1];
+var createColorScale = function (layout, series) {
+    var _a, _b, _c, _d, _e, _f;
+    var scale = (_a = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _a === void 0 ? void 0 : _a.colorscale;
+    var colorValues = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color;
+    var _g = [
+        (_d = (_c = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _c === void 0 ? void 0 : _c.cmin) !== null && _d !== void 0 ? _d : Math.min.apply(Math, colorValues),
+        (_f = (_e = layout === null || layout === void 0 ? void 0 : layout.coloraxis) === null || _e === void 0 ? void 0 : _e.cmax) !== null && _f !== void 0 ? _f : Math.max.apply(Math, colorValues),
+    ], dMin = _g[0], dMax = _g[1];
     // Normalize colorscale domain to actual data domain
-    var scaleDomain = colorscale.map(function (_a) {
+    var scaleDomain = scale.map(function (_a) {
         var pos = _a[0];
         return dMin + pos * (dMax - dMin);
     });
-    var scaleColors = colorscale.map(function (item) { return item[1]; });
+    var scaleColors = scale.map(function (item) { return item[1]; });
     return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
 };
 export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayType, isDarkTheme) {
@@ -285,23 +329,17 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
     var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
     var colorScale = undefined;
     input.data.forEach(function (series, index1) {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
             isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
             ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
             typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
-            var scale = input.layout.coloraxis.colorscale;
-            var colorValues = (_h = series.marker) === null || _h === void 0 ? void 0 : _h.color;
-            var _t = [
-                (_k = (_j = input.layout.coloraxis) === null || _j === void 0 ? void 0 : _j.cmin) !== null && _k !== void 0 ? _k : Math.min.apply(Math, colorValues),
-                (_m = (_l = input.layout.coloraxis) === null || _l === void 0 ? void 0 : _l.cmax) !== null && _m !== void 0 ? _m : Math.max.apply(Math, colorValues),
-            ], dMin = _t[0], dMax = _t[1];
-            colorScale = createColorScale(scale, [dMin, dMax]);
+            colorScale = createColorScale(input.layout, series);
         }
         // extract colors for each series only once
-        var extractedColors = extractColor((_q = (_p = (_o = input.layout) === null || _o === void 0 ? void 0 : _o.template) === null || _p === void 0 ? void 0 : _p.layout) === null || _q === void 0 ? void 0 : _q.colorway, colorwayType, (_r = series.marker) === null || _r === void 0 ? void 0 : _r.color, colorMap, isDarkTheme);
-        (_s = series.x) === null || _s === void 0 ? void 0 : _s.forEach(function (x, xIndex) {
-            var _a, _b, _c, _d;
+        var extractedColors = extractColor((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
+        (_m = series.x) === null || _m === void 0 ? void 0 : _m.forEach(function (x, xIndex) {
+            var _a, _b, _c, _d, _e;
             if (isInvalidValue(x) || isInvalidValue((_a = series.y) === null || _a === void 0 ? void 0 : _a[xIndex])) {
                 return;
             }
@@ -312,7 +350,9 @@ export var transformPlotlyJsonToGVBCProps = function (input, colorMap, colorwayT
                 var legend = legends[index1];
                 // resolve color for each legend's bars from the colorscale or extracted colors
                 var color = colorScale
-                    ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex] : 0)
+                    ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
+                        ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[xIndex % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
+                        : 0)
                     : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
                 mapXToDataPoints[x].series.push({
                     key: legend,
@@ -332,13 +372,20 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayTy
     var _a, _b, _c;
     var vbcData = [];
     var _d = getLegendProps(input.data, input.layout), legends = _d.legends, hideLegend = _d.hideLegend;
+    var colorScale = undefined;
     input.data.forEach(function (series, seriesIdx) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         if (!series.x) {
             return;
         }
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedColors = extractColor((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         var xValues = [];
         var yValues = [];
         series.x.forEach(function (xVal, index) {
@@ -352,7 +399,7 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayTy
         var isXString = isStringArray(xValues);
         // TODO: In case of a single bin, add an empty bin of the same size to prevent the
         // default bar width from being used and ensure the bar spans the full intended range.
-        var xBins = createBins(xValues, (_e = series.xbins) === null || _e === void 0 ? void 0 : _e.start, (_f = series.xbins) === null || _f === void 0 ? void 0 : _f.end, (_g = series.xbins) === null || _g === void 0 ? void 0 : _g.size);
+        var xBins = createBins(xValues, (_m = series.xbins) === null || _m === void 0 ? void 0 : _m.start, (_o = series.xbins) === null || _o === void 0 ? void 0 : _o.end, (_p = series.xbins) === null || _p === void 0 ? void 0 : _p.size);
         var yBins = xBins.map(function () { return []; });
         var total = 0;
         xValues.forEach(function (xVal, index) {
@@ -367,9 +414,14 @@ export var transformPlotlyJsonToVBCProps = function (input, colorMap, colorwayTy
             return yVal;
         });
         xBins.forEach(function (bin, index) {
+            var _a, _b, _c, _d;
             var legend = legends[seriesIdx];
-            // resolve color for each legend's bars from the extracted colors
-            var color = resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            var color = colorScale
+                ? colorScale(isArrayOrTypedArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.color)
+                    ? (_c = (_b = series.marker) === null || _b === void 0 ? void 0 : _b.color) === null || _c === void 0 ? void 0 : _c[index % ((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color).length]
+                    : 0)
+                : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
             var yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
             vbcData.push(__assign({ x: isXString ? bin.join(', ') : getBinCenter(bin), y: yVal, legend: legend, color: color }, (isXString
                 ? {}
@@ -399,22 +451,29 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
     var _g = getLegendProps(input.data, input.layout), legends = _g.legends, hideLegend = _g.hideLegend;
     var chartData = input.data
         .map(function (series, index) {
-        var _a, _b, _c, _d, _e, _f, _g;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var colors = isScatterMarkers
+            ? ((_a = series === null || series === void 0 ? void 0 : series.mode) === null || _a === void 0 ? void 0 : _a.includes('line'))
+                ? (_b = series.line) === null || _b === void 0 ? void 0 : _b.color
+                : (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color
+            : (_d = series.line) === null || _d === void 0 ? void 0 : _d.color;
         // extract colors for each series only once
-        var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, isScatterMarkers ? (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color : (_e = series.line) === null || _e === void 0 ? void 0 : _e.color, colorMap, isDarkTheme);
+        var extractedColors = extractColor((_g = (_f = (_e = input.layout) === null || _e === void 0 ? void 0 : _e.template) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.colorway, colorwayType, colors, colorMap, isDarkTheme);
         var xValues = series.x;
-        var isString = isStringArray(xValues);
+        var isXString = isStringArray(xValues);
         var isXDate = isDateArray(xValues);
         var isXNumber = isNumberArray(xValues);
+        // string case is not possible for scatter chart as it is already filtered out in declarative chart
+        var isXYearCategory = false;
         var legend = legends[index];
         // resolve color for each legend's lines from the extracted colors
         var seriesColor = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         mode = series.fill === 'tozeroy' ? 'tozeroy' : 'tonexty';
         var lineOptions = getLineOptions(series.line);
-        var dashType = ((_f = series.line) === null || _f === void 0 ? void 0 : _f.dash) || 'solid';
+        var dashType = ((_h = series.line) === null || _h === void 0 ? void 0 : _h.dash) || 'solid';
         var legendShape = dashType === 'dot' || dashType === 'dash' || dashType === 'dashdot'
             ? 'dottedLine'
-            : ((_g = series.mode) === null || _g === void 0 ? void 0 : _g.includes('markers'))
+            : ((_j = series.mode) === null || _j === void 0 ? void 0 : _j.includes('markers'))
                 ? 'circle'
                 : 'default';
         var validXYRanges = getValidXYRanges(series);
@@ -426,16 +485,17 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
             var markerSizes = isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size)
                 ? series.marker.size.slice(rangeStart, rangeEnd)
                 : [];
+            var textValues = Array.isArray(series.text) ? series.text.slice(rangeStart, rangeEnd) : undefined;
             return {
                 legend: legend,
                 legendShape: legendShape,
                 data: rangeXValues.map(function (x, i) {
                     var _a, _b;
-                    return (__assign({ x: isString ? (isXDate ? new Date(x) : isXNumber ? parseFloat(x) : x) : x, y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
+                    return (__assign(__assign({ x: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber), y: rangeYValues[i] }, (Array.isArray((_a = series.marker) === null || _a === void 0 ? void 0 : _a.size)
                         ? { markerSize: markerSizes[i] }
                         : typeof ((_b = series.marker) === null || _b === void 0 ? void 0 : _b.size) === 'number'
                             ? { markerSize: series.marker.size }
-                            : {})));
+                            : {})), (textValues ? { text: textValues[i] } : {})));
                 }),
                 color: seriesColor,
                 lineOptions: __assign(__assign({}, (lineOptions !== null && lineOptions !== void 0 ? lineOptions : {})), { mode: series.mode }),
@@ -461,20 +521,31 @@ export var transformPlotlyJsonToScatterChartProps = function (input, isAreaChart
 export var transformPlotlyJsonToHorizontalBarWithAxisProps = function (input, colorMap, colorwayType, isDarkTheme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     var _s = getLegendProps(input.data, input.layout), legends = _s.legends, hideLegend = _s.hideLegend;
+    var colorScale = undefined;
     var chartData = input.data
         .map(function (series, index) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+        if (((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.coloraxis) === null || _b === void 0 ? void 0 : _b.colorscale) === null || _c === void 0 ? void 0 : _c.length) &&
+            isArrayOrTypedArray((_d = series.marker) === null || _d === void 0 ? void 0 : _d.color) &&
+            ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length > 0 &&
+            typeof ((_g = (_f = series.marker) === null || _f === void 0 ? void 0 : _f.color) === null || _g === void 0 ? void 0 : _g[0]) === 'number') {
+            colorScale = createColorScale(input.layout, series);
+        }
         // extract colors for each series only once
-        var extractedColors = extractColor((_c = (_b = (_a = input.layout) === null || _a === void 0 ? void 0 : _a.template) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.colorway, colorwayType, (_d = series.marker) === null || _d === void 0 ? void 0 : _d.color, colorMap, isDarkTheme);
+        var extractedColors = extractColor((_k = (_j = (_h = input.layout) === null || _h === void 0 ? void 0 : _h.template) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.colorway, colorwayType, (_l = series.marker) === null || _l === void 0 ? void 0 : _l.color, colorMap, isDarkTheme);
         var legend = legends[index];
-        // resolve color for each legend's bars from the extracted colors
-        var color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
         return series.y
             .map(function (yValue, i) {
-            var _a;
+            var _a, _b, _c, _d, _e;
             if (isInvalidValue((_a = series.x) === null || _a === void 0 ? void 0 : _a[i]) || isInvalidValue(yValue)) {
                 return null;
             }
+            // resolve color for each legend's bars from the colorscale or extracted colors
+            var color = colorScale
+                ? colorScale(isArrayOrTypedArray((_b = series.marker) === null || _b === void 0 ? void 0 : _b.color)
+                    ? (_d = (_c = series.marker) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d[i % ((_e = series.marker) === null || _e === void 0 ? void 0 : _e.color).length]
+                    : 0)
+                : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
             return {
                 x: series.x[i],
                 y: yValue,