diff --git a/components/frontend/src/dashboard/MetricSummaryCard.js b/components/frontend/src/dashboard/MetricSummaryCard.js
index 459ba3ce97..9a07edd185 100644
--- a/components/frontend/src/dashboard/MetricSummaryCard.js
+++ b/components/frontend/src/dashboard/MetricSummaryCard.js
@@ -2,7 +2,7 @@ import "./MetricSummaryCard.css"
 
 import { bool, func, number, object, oneOfType, string } from "prop-types"
 import { useContext } from "react"
-import { VictoryContainer, VictoryLabel, VictoryPortal, VictoryTooltip } from "victory"
+import { VictoryContainer, VictoryLabel, VictoryTooltip } from "victory"
 
 import { DarkMode } from "../context/DarkMode"
 import { useBoundingBox } from "../hooks/boundingbox"
@@ -69,20 +69,36 @@ export function MetricSummaryCard({ header, onClick, selected, summary, maxY })
     const dates = Object.keys(summary)
     const bbWidth = boundingBox.width ?? 0
     const bbHeight = boundingBox.height ?? 0
-    const label = (
-        <VictoryPortal x={bbWidth / 2} y={bbHeight / 2}>
+    const chartProps = {
+        animate: animate,
+        centerLabel: (
             <VictoryLabel
-                textAnchor="middle"
-                style={{ fontFamily: "Arial", fontSize: 12, fill: labelColor }}
                 text={nrMetricsLabel(sum(summary[dates[0]]))}
+                textAnchor="middle"
+                x={bbWidth / 2}
+                y={bbHeight / 2}
             />
-        </VictoryPortal>
-    )
-    const chartProps = {
-        animate: animate,
+        ),
         colors: colors,
+        events: [
+            {
+                childName: "all",
+                target: "data",
+                eventHandlers: {
+                    onClick: () => {
+                        return [
+                            {
+                                target: "labels",
+                                mutation: () => {
+                                    return { active: false } // Clear tooltip before filtering
+                                },
+                            },
+                        ]
+                    },
+                },
+            },
+        ],
         height: Math.max(bbHeight, 1), // Prevent "Failed prop type: Invalid prop range supplied to VictoryBar"
-        label: label,
         maxY: maxY,
         style: style,
         tooltip: tooltip,
diff --git a/components/frontend/src/dashboard/StatusBarChart.js b/components/frontend/src/dashboard/StatusBarChart.js
index 1862c555b6..5fc6759249 100644
--- a/components/frontend/src/dashboard/StatusBarChart.js
+++ b/components/frontend/src/dashboard/StatusBarChart.js
@@ -1,4 +1,4 @@
-import { number, object } from "prop-types"
+import { arrayOf, number, object } from "prop-types"
 import { VictoryBar, VictoryStack } from "victory"
 
 import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
@@ -9,7 +9,7 @@ function nrMetricsLabel(nrMetrics) {
     return nrMetrics === 0 ? "No metrics" : nrMetrics + pluralize(" metric", nrMetrics)
 }
 
-export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY, style, width, height }) {
+export function StatusBarChart({ animate, centerLabel, colors, events, tooltip, summary, maxY, style, width, height }) {
     const nrMetrics = sum(summary[Object.keys(summary)[0]])
     const nrDates = Object.keys(summary).length
     // Calculate how many metrics this chart displays compared to the chart with the most metrics.
@@ -33,6 +33,7 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
         })
         return (
             <VictoryBar
+                events={events}
                 barRatio={barRatio}
                 key={status}
                 style={style}
@@ -50,7 +51,7 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
     const horizontalPadding = width / 8
     const verticalPadding = 10
     return nrMetrics === 0 ? (
-        label
+        centerLabel
     ) : (
         <VictoryStack
             colorScale={colors}
@@ -71,8 +72,9 @@ export function StatusBarChart({ animate, colors, label, tooltip, summary, maxY,
 }
 StatusBarChart.propTypes = {
     animate: object,
+    centerLabel: labelPropType,
     colors: stringsPropType,
-    label: labelPropType,
+    events: arrayOf(object),
     tooltip: object,
     summary: object,
     maxY: number,
diff --git a/components/frontend/src/dashboard/StatusPieChart.js b/components/frontend/src/dashboard/StatusPieChart.js
index 4df01d7dc2..31e68a9487 100644
--- a/components/frontend/src/dashboard/StatusPieChart.js
+++ b/components/frontend/src/dashboard/StatusPieChart.js
@@ -1,8 +1,8 @@
-import { element, number, object } from "prop-types"
+import { arrayOf, element, number, object } from "prop-types"
 import { VictoryPie } from "victory"
 
 import { STATUS_COLORS, STATUS_NAME, STATUSES } from "../metric/status"
-import { stringsPropType } from "../sharedPropTypes"
+import { labelPropType, stringsPropType } from "../sharedPropTypes"
 import { pluralize, sum } from "../utils"
 
 function nrMetricsLabel(nrMetrics) {
@@ -12,10 +12,10 @@ nrMetricsLabel.PropTypes = {
     nrMetrics: number,
 }
 
-export function StatusPieChart({ animate, colors, label, tooltip, summary, style, maxY, width, height }) {
+export function StatusPieChart({ animate, centerLabel, colors, events, tooltip, summary, style, maxY, width, height }) {
     const nrMetrics = sum(summary)
     const outerRadius = 0.45 * Math.min(height, width)
-    const minInnerRadius = 0.3 * outerRadius
+    const minInnerRadius = 0.4 * outerRadius
     const maxInnerRadius = 0.8 * outerRadius
     const innerRadius = maxInnerRadius - (maxInnerRadius - minInnerRadius) * (nrMetrics / maxY)
     const data = STATUSES.map((status) => {
@@ -25,11 +25,12 @@ export function StatusPieChart({ animate, colors, label, tooltip, summary, style
     })
     return (
         <>
-            {label}
+            {centerLabel}
             {nrMetrics > 0 && (
                 <VictoryPie
                     animate={animate}
                     colorScale={colors}
+                    events={events}
                     radius={outerRadius}
                     innerRadius={innerRadius}
                     standalone={false}
@@ -46,9 +47,10 @@ export function StatusPieChart({ animate, colors, label, tooltip, summary, style
 }
 StatusPieChart.propTypes = {
     animate: object,
+    centerLabel: labelPropType,
     colors: stringsPropType,
+    events: arrayOf(object),
     height: number,
-    label: object,
     maxY: number,
     style: object,
     summary: object,
diff --git a/docs/src/changelog.md b/docs/src/changelog.md
index 96fa0822f5..50bbb4135d 100644
--- a/docs/src/changelog.md
+++ b/docs/src/changelog.md
@@ -8,6 +8,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 <!-- The line "## <square-bracket>Unreleased</square-bracket>" is replaced by the release/release.py script with the new release version and release date. -->
 
+## [Unreleased]
+
+### Deployment notes
+
+If your currently installed *Quality-time* version is not v5.17.0, please first check the upgrade path in the [versioning policy](versioning.md).
+
+### Fixed
+
+- The metric summary cards with pie chart wouldn't erase the center label when rerendering, causing the label to be visible multiple times. Fixes [#10098](https://github.com/ICTU/quality-time/issues/10098).
+
 ## v5.17.0 - 2024-10-17
 
 ### Deployment notes
diff --git a/docs/src/versioning.md b/docs/src/versioning.md
index 2f65d1b543..d7dace9490 100644
--- a/docs/src/versioning.md
+++ b/docs/src/versioning.md
@@ -21,12 +21,13 @@ The table below contains the *Quality-time* releases since the last minor of the
 
 | Version    | Date         | Mongo  | FC     | Migrations | Downgrade       | Upgrade         | Manual changes |
 |------------|--------------|--------|--------|------------|-----------------|-----------------|----------------|
-| v5.17.0    | 2024-10-17   | **v8** | v7     |            | v5.14.0-v5.16.2 | n/a             | no             |
-| v5.16.2    | 2024-10-03   | v7     | v7     |            | v5.14.0-v5.16.1 | v5.17.0         | no             |
-| v5.16.1    | 2024-09-26   | v7     | v7     |            | v5.14.0-v5.16.0 | v5.16.2-v5.17.0 | no             |
-| v5.16.0    | 2024-09-19   | v7     | v7     | added      | v5.14.0-v5.15.0 | v5.16.1-v5.17.0 | no             |
-| v5.15.0    | 2024-07-30   | v7     | v7     |            | v5.14.0         | v5.16.0-v5.17.0 | no             |
-| v5.14.0    | 2024-07-05   | v7     | **v7** | added      | not possible    | v5.15.0-v5.17.0 | no             |
+| v5.17.1    | [unreleased] | v8     | v7     |            | v5.14.0-v5.17.0 | n/a             | no             |
+| v5.17.0    | 2024-10-17   | **v8** | v7     |            | v5.14.0-v5.16.2 | v5.17.1         | no             |
+| v5.16.2    | 2024-10-03   | v7     | v7     |            | v5.14.0-v5.16.1 | v5.17.0-v5.17.1 | no             |
+| v5.16.1    | 2024-09-26   | v7     | v7     |            | v5.14.0-v5.16.0 | v5.16.2-v5.17.1 | no             |
+| v5.16.0    | 2024-09-19   | v7     | v7     | added      | v5.14.0-v5.15.0 | v5.16.1-v5.17.1 | no             |
+| v5.15.0    | 2024-07-30   | v7     | v7     |            | v5.14.0         | v5.16.0-v5.17.1 | no             |
+| v5.14.0    | 2024-07-05   | v7     | **v7** | added      | not possible    | v5.15.0-v5.17.1 | no             |
 | v5.13.0    | 2024-05-23   | v7     | v6     | added      | not possible    | v5.14.0-v5.16.2 | no             |
 | v5.12.0    | 2024-05-17   | v7     | v6     | added      | not possible    | v5.13.0-v5.16.2 | no             |
 | v5.11.0    | 2024-04-22   | v7     | v6     |            | v5.6.0-v5.10.0  | v5.12.0-v5.16.2 | no             |