diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx index 207959ea00..3369bbbfa2 100644 --- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx +++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx @@ -1363,13 +1363,21 @@ export class LineChart // Order of the legend items on a line chart should visually correspond // to the order of the lines as the approach the legend @computed get lineLegendSeries(): LineLabelSeries[] { - // If there are any projections, ignore non-projection legends - // Bit of a hack - let seriesToShow = this.series - if (seriesToShow.some((series) => !!series.isProjection)) - seriesToShow = seriesToShow.filter((series) => series.isProjection) + // If there are any projections, ignore non-projection legends (bit of a hack) + let series = this.series + if (series.some((series) => !!series.isProjection)) + series = series.filter((series) => series.isProjection) + + // Deduplicate series by seriesName to avoid showing the same label multiple times + const deduplicatedSeries: LineChartSeries[] = [] + const seriesGroupedByName = groupBy(series, "seriesName") + for (const duplicates of Object.values(seriesGroupedByName)) { + // keep only the label for the series with the most recent data + // (series are sorted by time, so we can just take the last one) + deduplicatedSeries.push(last(duplicates)!) + } - return seriesToShow.map((series) => { + return deduplicatedSeries.map((series) => { const { seriesName, color } = series const lastValue = last(series.points)!.y return {