diff --git a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx index eccf14bd72..5f64be14fa 100644 --- a/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx +++ b/packages/@ourworldindata/grapher/src/lineCharts/LineChart.tsx @@ -82,7 +82,7 @@ import { import { autoDetectSeriesStrategy, autoDetectYColumnSlugs, - byInteractionState, + byHoverThenFocusState, getDefaultFailMessage, getInteractionStateForSeries, getSeriesKey, @@ -115,6 +115,7 @@ import { getColorKey, getSeriesName, } from "./LineChartHelpers" +import { InteractionArray } from "../selection/InteractionArray" const LINE_CHART_CLASS_NAME = "LineChart" @@ -491,7 +492,9 @@ export class LineChart ) const blurred = - this.seriesIsBlurred(series) || point === undefined + this.hoverStateForSeries(series).background || + this.focusArray.isInBackground(series.seriesName) || + point === undefined const color = blurred ? BLUR_LINE_COLOR @@ -1124,8 +1127,8 @@ export class LineChart // sort by interaction state so that hovered series // are drawn on top of background series - if (this.isHoverModeActive) { - return sortBy(series, byInteractionState) + if (this.isHoverModeActive || this.focusArray.hasActiveSeries) { + return sortBy(series, byHoverThenFocusState) } return series diff --git a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx index eb9be171d5..01fc2ed751 100644 --- a/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx +++ b/packages/@ourworldindata/grapher/src/slopeCharts/SlopeChart.tsx @@ -50,7 +50,6 @@ import { CoreColumn, OwidTable } from "@ourworldindata/core-table" import { autoDetectSeriesStrategy, autoDetectYColumnSlugs, - byInteractionState, byHoverThenFocusState, getDefaultFailMessage, getInteractionStateForSeries,