diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.test.ts b/packages/charts/src/chart_types/xy_chart/utils/series.test.ts index 6f2e4714bf..8b1171b2eb 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/series.test.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/series.test.ts @@ -236,7 +236,7 @@ describe('Series', () => { }), ]; const xValues = new Set([1, 2, 3, 4]); - const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues); + const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues, 'bar'); expect(stackedValues.map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); }); test('Can stack unsorted dataseries', () => { @@ -287,7 +287,7 @@ describe('Series', () => { }), ]; const xValues = new Set(new Array(maxArrayItems).fill(0).map((d, i) => i)); - const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues); + const stackedValues = formatStackedDataSeriesValues(dataSeries, xValues, 'bar'); expect(stackedValues.map(matchOnlyDataSeriesLegacySnapshot)).toMatchSnapshot(); }); test('Can stack simple dataseries with scale to extent', () => { diff --git a/packages/charts/src/chart_types/xy_chart/utils/series.ts b/packages/charts/src/chart_types/xy_chart/utils/series.ts index 364b7311f5..5fba386ce6 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/series.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/series.ts @@ -332,8 +332,8 @@ export function getFormattedDataSeries( ); const fittedAndStackedDataSeries = stackedGroups.reduce((acc, dataSeries) => { - const [{ stackMode }] = dataSeries; - const formatted = formatStackedDataSeriesValues(dataSeries, xValues, stackMode); + const [{ stackMode, seriesType }] = dataSeries; + const formatted = formatStackedDataSeriesValues(dataSeries, xValues, seriesType, stackMode); return [...acc, ...formatted]; }, []); // get already fitted non stacked dataSeries diff --git a/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts b/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts index 85e4ceb8a7..37dfb3fe34 100644 --- a/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts +++ b/packages/charts/src/chart_types/xy_chart/utils/stacked_series_utils.ts @@ -11,6 +11,7 @@ import { stack as D3Stack, stackOffsetWiggle, stackOrderNone } from 'd3-shape'; import { SeriesKey } from '../../../common/series_id'; import { ScaleType } from '../../../scales/constants'; import { clamp, isDefined } from '../../../utils/common'; +import { Logger } from '../../../utils/logger'; import { diverging, divergingPercentage, @@ -20,7 +21,7 @@ import { XValueSeriesDatum, } from './diverging_offsets'; import { DataSeries, DataSeriesDatum } from './series'; -import { StackMode } from './specs'; +import { SeriesType, StackMode } from './specs'; /** @internal */ export interface StackedValues { @@ -44,6 +45,7 @@ export const datumXSortPredicate = (xScaleType: ScaleType, sortedXValues?: (stri export function formatStackedDataSeriesValues( dataSeries: DataSeries[], xValues: Set, + seriesType: SeriesType, stackMode?: StackMode, ): DataSeries[] { const dataSeriesMap = dataSeries.reduce>((acc, curr) => { @@ -68,6 +70,13 @@ export function formatStackedDataSeriesValues( }); xMap.set(xValue, seriesMap); }); + + if (hasNegative && hasPositive && seriesType === SeriesType.Area) { + Logger.warn( + `Area series should be avoided with dataset containing positive and negative values. Use a bar series instead.`, + ); + } + const keys = [...dataSeriesMap.keys()].reduce((acc, key) => [...acc, `${key}-y0`, key], []); const stackOffset = getOffsetBasedOnStackMode(stackMode, hasNegative && !hasPositive); const stack = D3Stack()