diff --git a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts index b552ceba5c49e..31532efed2367 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts @@ -278,7 +278,7 @@ export default function transformProps( const array = ensureIsArray(chartProps.rawFormData?.time_compare); const inverted = invert(verboseMap); - const offsetLineWidths: { [key: string]: number } = {}; + const offsetLineWidths: string[] = []; rawSeries.forEach(entry => { const derivedSeries = isDerivedSeries(entry, chartProps.rawFormData); @@ -288,11 +288,20 @@ export default function transformProps( entry, ensureIsArray(chartProps.rawFormData?.time_compare), )!; - if (!offsetLineWidths[offset]) { - offsetLineWidths[offset] = Object.keys(offsetLineWidths).length + 1; + if (!offsetLineWidths.includes(offset)) { + offsetLineWidths.push(offset); + const position = offsetLineWidths.length; + if (position < 5) { + // increase the width of the line only up to 5 + // or it gets too thick and hard to distinguish + lineStyle.width = position; + lineStyle.type = 'dashed'; + } else { + // use a combination of dash and dot for the line style + lineStyle.width = (position % 3) + 1; + lineStyle.type = [(position % 5) + 1, (position % 3) + 1]; + } } - lineStyle.type = 'dashed'; - lineStyle.width = offsetLineWidths[offset]; lineStyle.opacity = OpacityEnum.DerivedSeries; } 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 df4817a018c86..de90333c1e7b8 100644 --- a/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts +++ b/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformers.ts @@ -314,15 +314,7 @@ export function transformSeries( opacity: opacity * areaOpacity, } : undefined, - emphasis: { - // bold on hover as required since 5.3.0 to retain backwards feature parity: - // https://apache.github.io/echarts-handbook/en/basics/release-note/5-3-0/#removing-the-default-bolding-emphasis-effect-in-the-line-chart - // TODO: should consider only adding emphasis to currently hovered series - lineStyle: { - width: 'bolder', - }, - ...emphasis, - }, + emphasis, showSymbol, symbolSize: markerSize, label: {