diff --git a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
index f3ba45d9eef1a..217a614e40862 100644
--- a/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/charts/transaction_distribution_chart/index.tsx
@@ -302,7 +302,8 @@ export function TransactionDistributionChart({
             fieldName !== undefined &&
             fieldValue !== undefined && (
               <AreaSeries
-                id={`apmTransactionDistributionChartAreaSeries${fieldName}${fieldValue}`}
+                // id is used as the label for the legend
+                id={`${fieldName}:${fieldValue}`}
                 xScaleType={ScaleType.Log}
                 yScaleType={ScaleType.Log}
                 data={histogram}