@fluentui/react-charts 0.0.0-nightly-20250815-0407.1 → 0.0.0-nightly-20250818-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,28 +1,28 @@
1
1
  # Change Log - @fluentui/react-charts
2
2
 
3
- This log was last generated on Fri, 15 Aug 2025 04:22:10 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 18 Aug 2025 04:22:14 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20250815-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250815-0407.1)
7
+ ## [0.0.0-nightly-20250818-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v0.0.0-nightly-20250818-0407.1)
8
8
 
9
- Fri, 15 Aug 2025 04:22:10 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250815-0407.1)
9
+ Mon, 18 Aug 2025 04:22:14 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-charts_v9.2.2..@fluentui/react-charts_v0.0.0-nightly-20250818-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-button to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
16
- - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
17
- - Bump @fluentui/react-overflow to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
18
- - Bump @fluentui/react-popover to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
19
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
20
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
21
- - Bump @fluentui/react-theme to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
22
- - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
23
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
24
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
25
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250815-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/3e611c711db2f9cabd03878b8dd19321b2589408) by beachball)
15
+ - Bump @fluentui/react-button to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
16
+ - Bump @fluentui/react-jsx-runtime to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
17
+ - Bump @fluentui/react-overflow to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
18
+ - Bump @fluentui/react-popover to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
19
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
20
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
21
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
22
+ - Bump @fluentui/react-tooltip to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
23
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
24
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
25
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20250818-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cd9138d5415d888fc6a573c6d817f1f25efa471d) by beachball)
26
26
 
27
27
  ## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-charts_v9.2.2)
28
28
 
@@ -216,14 +216,18 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
216
216
  let yMaxValue = 0;
217
217
  const secondaryYAxisValues = getSecondaryYAxisValues(input.data, input.layout);
218
218
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
219
+ let colorScale = undefined;
219
220
  let yMinValue = 0;
220
221
  input.data.forEach((series, index1)=>{
221
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _input_layout_template_layout1, _input_layout_template1, _input_layout1, _series_line;
222
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _input_layout_template_layout1, _input_layout_template1, _input_layout2, _series_line;
223
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
224
+ colorScale = createColorScale(input.layout, series);
225
+ }
222
226
  const isXYearCategory = isYearArray(series.x); // Consider year as categorical not numeric continuous axis
223
227
  // extract bar colors for each series only once
224
- const extractedBarColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
228
+ const extractedBarColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
225
229
  // extract line colors for each series only once
226
- const extractedLineColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template1 = _input_layout1.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
230
+ const extractedLineColors = extractColor((_input_layout2 = input.layout) === null || _input_layout2 === void 0 ? void 0 : (_input_layout_template1 = _input_layout2.template) === null || _input_layout_template1 === void 0 ? void 0 : (_input_layout_template_layout1 = _input_layout_template1.layout) === null || _input_layout_template_layout1 === void 0 ? void 0 : _input_layout_template_layout1.colorway, colorwayType, (_series_line = series.line) === null || _series_line === void 0 ? void 0 : _series_line.color, colorMap, isDarkTheme);
227
231
  const xValues = series.x;
228
232
  const isXDate = isDateArray(xValues);
229
233
  const isXString = isStringArray(xValues);
@@ -233,6 +237,7 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
233
237
  const rangeXValues = series.x.slice(rangeStart, rangeEnd);
234
238
  const rangeYValues = series.y.slice(rangeStart, rangeEnd);
235
239
  rangeXValues.forEach((x, index2)=>{
240
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
236
241
  if (!mapXToDataPoints[x]) {
237
242
  mapXToDataPoints[x] = {
238
243
  xAxisPoint: resolveXAxisPoint(x, isXYearCategory, isXString, isXDate, isXNumber),
@@ -241,8 +246,8 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
241
246
  };
242
247
  }
243
248
  const legend = legends[index1];
244
- // resolve color for each legend's bars from the extracted colors
245
- const color = resolveColor(extractedBarColors, index1, legend, colorMap, isDarkTheme);
249
+ // resolve color for each legend's bars from the colorscale or extracted colors
250
+ const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedBarColors, index2, legend, colorMap, isDarkTheme);
246
251
  const yVal = rangeYValues[index2];
247
252
  if (series.type === 'bar') {
248
253
  mapXToDataPoints[x].chartData.push({
@@ -303,11 +308,18 @@ export const transformPlotlyJsonToVSBCProps = (input, colorMap, colorwayType, is
303
308
  showYAxisLablesTooltip: true
304
309
  };
305
310
  };
306
- const createColorScale = (colorscale, domain)=>{
307
- const [dMin, dMax] = domain;
311
+ const createColorScale = (layout, series)=>{
312
+ var _layout_coloraxis, _series_marker, _layout_coloraxis1, _layout_coloraxis2;
313
+ const scale = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis = layout.coloraxis) === null || _layout_coloraxis === void 0 ? void 0 : _layout_coloraxis.colorscale;
314
+ const colorValues = (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color;
315
+ var _layout_coloraxis_cmin, _layout_coloraxis_cmax;
316
+ const [dMin, dMax] = [
317
+ (_layout_coloraxis_cmin = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis1 = layout.coloraxis) === null || _layout_coloraxis1 === void 0 ? void 0 : _layout_coloraxis1.cmin) !== null && _layout_coloraxis_cmin !== void 0 ? _layout_coloraxis_cmin : Math.min(...colorValues),
318
+ (_layout_coloraxis_cmax = layout === null || layout === void 0 ? void 0 : (_layout_coloraxis2 = layout.coloraxis) === null || _layout_coloraxis2 === void 0 ? void 0 : _layout_coloraxis2.cmax) !== null && _layout_coloraxis_cmax !== void 0 ? _layout_coloraxis_cmax : Math.max(...colorValues)
319
+ ];
308
320
  // Normalize colorscale domain to actual data domain
309
- const scaleDomain = colorscale.map(([pos])=>dMin + pos * (dMax - dMin));
310
- const scaleColors = colorscale.map((item)=>item[1]);
321
+ const scaleDomain = scale.map(([pos])=>dMin + pos * (dMax - dMin));
322
+ const scaleColors = scale.map((item)=>item[1]);
311
323
  return d3ScaleLinear().domain(scaleDomain).range(scaleColors);
312
324
  };
313
325
  export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, isDarkTheme)=>{
@@ -319,18 +331,7 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
319
331
  input.data.forEach((series, index1)=>{
320
332
  var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_x;
321
333
  if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
322
- var _series_marker4, _input_layout_coloraxis1, _input_layout_coloraxis2;
323
- const scale = input.layout.coloraxis.colorscale;
324
- const colorValues = (_series_marker4 = series.marker) === null || _series_marker4 === void 0 ? void 0 : _series_marker4.color;
325
- var _input_layout_coloraxis_cmin, _input_layout_coloraxis_cmax;
326
- const [dMin, dMax] = [
327
- (_input_layout_coloraxis_cmin = (_input_layout_coloraxis1 = input.layout.coloraxis) === null || _input_layout_coloraxis1 === void 0 ? void 0 : _input_layout_coloraxis1.cmin) !== null && _input_layout_coloraxis_cmin !== void 0 ? _input_layout_coloraxis_cmin : Math.min(...colorValues),
328
- (_input_layout_coloraxis_cmax = (_input_layout_coloraxis2 = input.layout.coloraxis) === null || _input_layout_coloraxis2 === void 0 ? void 0 : _input_layout_coloraxis2.cmax) !== null && _input_layout_coloraxis_cmax !== void 0 ? _input_layout_coloraxis_cmax : Math.max(...colorValues)
329
- ];
330
- colorScale = createColorScale(scale, [
331
- dMin,
332
- dMax
333
- ]);
334
+ colorScale = createColorScale(input.layout, series);
334
335
  }
335
336
  // extract colors for each series only once
336
337
  const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
@@ -346,10 +347,10 @@ export const transformPlotlyJsonToGVBCProps = (input, colorMap, colorwayType, is
346
347
  };
347
348
  }
348
349
  if (series.type === 'bar') {
349
- var _series_marker, _series_marker_color, _series_marker1;
350
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
350
351
  const legend = legends[index1];
351
352
  // resolve color for each legend's bars from the colorscale or extracted colors
352
- const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : (_series_marker_color = _series_marker1.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
353
+ const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index2 % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index1, legend, colorMap, isDarkTheme);
353
354
  mapXToDataPoints[x].series.push({
354
355
  key: legend,
355
356
  data: series.y[index2],
@@ -384,13 +385,17 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
384
385
  var _input_layout, _input_layout1, _vbcData_;
385
386
  const vbcData = [];
386
387
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
388
+ let colorScale = undefined;
387
389
  input.data.forEach((series, seriesIdx)=>{
388
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker, _series_xbins, _series_xbins1, _series_xbins2;
390
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3, _series_xbins, _series_xbins1, _series_xbins2;
389
391
  if (!series.x) {
390
392
  return;
391
393
  }
394
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
395
+ colorScale = createColorScale(input.layout, series);
396
+ }
392
397
  // extract colors for each series only once
393
- const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
398
+ const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
394
399
  const xValues = [];
395
400
  const yValues = [];
396
401
  series.x.forEach((xVal, index)=>{
@@ -419,9 +424,10 @@ export const transformPlotlyJsonToVBCProps = (input, colorMap, colorwayType, isD
419
424
  return yVal;
420
425
  });
421
426
  xBins.forEach((bin, index)=>{
427
+ var _series_marker, _series_marker1, _series_marker_color, _series_marker2;
422
428
  const legend = legends[seriesIdx];
423
- // resolve color for each legend's bars from the extracted colors
424
- const color = resolveColor(extractedColors, seriesIdx, legend, colorMap, isDarkTheme);
429
+ // resolve color for each legend's bars from the colorscale or extracted colors
430
+ const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[index % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
425
431
  const yVal = calculateHistNorm(series.histnorm, y[index], total, isXString ? bin.length : getBinSize(bin));
426
432
  vbcData.push({
427
433
  x: isXString ? bin.join(', ') : getBinCenter(bin),
@@ -550,18 +556,22 @@ export const transformPlotlyJsonToScatterChartProps = (input, isAreaChart, isSca
550
556
  export const transformPlotlyJsonToHorizontalBarWithAxisProps = (input, colorMap, colorwayType, isDarkTheme)=>{
551
557
  var _input_layout, _input_layout_margin, _input_layout1, _input_layout_margin1, _input_layout2, _input_layout_yaxis2, _input_layout3, _input_layout_yaxis21, _input_layout4, _input_layout_yaxis2_title, _input_layout_yaxis22, _input_layout5, _input_layout6;
552
558
  const { legends, hideLegend } = getLegendProps(input.data, input.layout);
559
+ let colorScale = undefined;
553
560
  const chartData = input.data.map((series, index)=>{
554
- var _input_layout_template_layout, _input_layout_template, _input_layout, _series_marker;
561
+ var _input_layout_coloraxis_colorscale, _input_layout_coloraxis, _input_layout, _series_marker, _series_marker1, _series_marker_color, _series_marker2, _input_layout_template_layout, _input_layout_template, _input_layout1, _series_marker3;
562
+ if (((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_coloraxis = _input_layout.coloraxis) === null || _input_layout_coloraxis === void 0 ? void 0 : (_input_layout_coloraxis_colorscale = _input_layout_coloraxis.colorscale) === null || _input_layout_coloraxis_colorscale === void 0 ? void 0 : _input_layout_coloraxis_colorscale.length) && isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) && ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length > 0 && typeof ((_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[0]) === 'number') {
563
+ colorScale = createColorScale(input.layout, series);
564
+ }
555
565
  // extract colors for each series only once
556
- const extractedColors = extractColor((_input_layout = input.layout) === null || _input_layout === void 0 ? void 0 : (_input_layout_template = _input_layout.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color, colorMap, isDarkTheme);
566
+ const extractedColors = extractColor((_input_layout1 = input.layout) === null || _input_layout1 === void 0 ? void 0 : (_input_layout_template = _input_layout1.template) === null || _input_layout_template === void 0 ? void 0 : (_input_layout_template_layout = _input_layout_template.layout) === null || _input_layout_template_layout === void 0 ? void 0 : _input_layout_template_layout.colorway, colorwayType, (_series_marker3 = series.marker) === null || _series_marker3 === void 0 ? void 0 : _series_marker3.color, colorMap, isDarkTheme);
557
567
  const legend = legends[index];
558
- // resolve color for each legend's bars from the extracted colors
559
- const color = resolveColor(extractedColors, index, legend, colorMap, isDarkTheme);
560
568
  return series.y.map((yValue, i)=>{
561
- var _series_x;
569
+ var _series_x, _series_marker, _series_marker1, _series_marker_color, _series_marker2;
562
570
  if (isInvalidValue((_series_x = series.x) === null || _series_x === void 0 ? void 0 : _series_x[i]) || isInvalidValue(yValue)) {
563
571
  return null;
564
572
  }
573
+ // resolve color for each legend's bars from the colorscale or extracted colors
574
+ const color = colorScale ? colorScale(isArrayOrTypedArray((_series_marker = series.marker) === null || _series_marker === void 0 ? void 0 : _series_marker.color) ? (_series_marker2 = series.marker) === null || _series_marker2 === void 0 ? void 0 : (_series_marker_color = _series_marker2.color) === null || _series_marker_color === void 0 ? void 0 : _series_marker_color[i % ((_series_marker1 = series.marker) === null || _series_marker1 === void 0 ? void 0 : _series_marker1.color).length] : 0) : resolveColor(extractedColors, i, legend, colorMap, isDarkTheme);
565
575
  return {
566
576
  x: series.x[i],
567
577
  y: yValue,