diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts index 4ac85317b9..9ac3ff28c2 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/MixedTimeseries/transformProps.ts @@ -175,9 +175,11 @@ export default function transformProps( stack, yAxisIndex, filterState, + seriesKey: entry.name, }); if (transformedSeries) series.push(transformedSeries); }); + rawSeriesB.forEach(entry => { const transformedSeries = transformSeries(entry, colorScale, { area: areaB, @@ -189,6 +191,9 @@ export default function transformProps( stack: stackB, yAxisIndex: yAxisIndexB, filterState, + seriesKey: primarySeries.has(entry.name as string) + ? `${entry.name} (1)` + : entry.name, }); if (transformedSeries) series.push(transformedSeries); }); diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts index c1a90fd615..19fe600ca3 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -83,6 +83,7 @@ export function transformSeries( showValueIndexes?: number[]; thresholdValues?: number[]; richTooltip?: boolean; + seriesKey?: OptionName; }, ): SeriesOption | undefined { const { name } = series; @@ -103,6 +104,7 @@ export function transformSeries( showValueIndexes = [], thresholdValues = [], richTooltip, + seriesKey, } = opts; const contexts = seriesContexts[name || ''] || []; const hasForecast = @@ -147,8 +149,9 @@ export function transformSeries( } else { plotType = seriesType === 'bar' ? 'bar' : 'line'; } + // forcing the colorScale to return a different color for same metrics across different queries const itemStyle = { - color: colorScale(forecastSeries.name), + color: colorScale(seriesKey || forecastSeries.name), opacity, }; let emphasis = {};