diff --git a/src/Components/Charts/BentoPie.tsx b/src/Components/Charts/BentoPie.tsx
index d7728e1..fe67c00 100644
--- a/src/Components/Charts/BentoPie.tsx
+++ b/src/Components/Charts/BentoPie.tsx
@@ -81,11 +81,12 @@ const BentoPie = ({
       data.push({
         x: t[OTHER_KEY],
         y: sum - data.reduce((acc, e) => acc + e.y, 0),
+        id: OTHER_KEY,
       });
     }
 
     return {
-      data: data.map((e) => ({ name: e.x, value: e.y })),
+      data: data.map((e) => ({ name: e.x, value: e.y, ...e })),
       sum,
     };
   }, [t, transformedData, resolvedChartThreshold]);
diff --git a/test/js/TestBarChart.tsx b/test/js/TestBarChart.tsx
index 1f307d3..7da8e78 100644
--- a/test/js/TestBarChart.tsx
+++ b/test/js/TestBarChart.tsx
@@ -11,16 +11,16 @@ const TestBarChart = () => {
       <ResizableCard title="Fixed Bar Chart" sizeState={sizeStateFixed} onSizeChange={setSizeStateFixed}>
         <BarChart
           data={[
-            { x: 'AB', y: 50 },
-            { x: 'NB', y: 75 },
-            { x: 'SB', y: 60 },
-            { x: 'AU', y: 30 },
-            { x: 'XA', y: 80 },
-            { x: 'BB', y: 50 },
-            { x: 'BC', y: 75 },
-            { x: 'BD', y: 60 },
-            { x: 'BE', y: 30 },
-            { x: 'BF', y: 80 },
+            { id: '0', x: 'AB', y: 50 },
+            { id: '1', x: 'NB', y: 75 },
+            { id: '2', x: 'SB', y: 60 },
+            { id: '3', x: 'AU', y: 30 },
+            { id: '4', x: 'XA', y: 80 },
+            { id: '5', x: 'BB', y: 50 },
+            { id: '6', x: 'BC', y: 75 },
+            { id: '7', x: 'BD', y: 60 },
+            { id: '8', x: 'BE', y: 30 },
+            { id: '9', x: 'BF', y: 80 },
           ]}
           units="management units"
           height={sizeStateFixed.height}
@@ -37,11 +37,11 @@ const TestBarChart = () => {
       <ResizableCard title="Responsive Bar Chart" sizeState={sizeStateResponsive} onSizeChange={setSizeStateResponsive}>
         <BarChart
           data={[
-            { x: 'AB', y: 50 },
-            { x: 'NB', y: 75 },
-            { x: 'SB', y: 60 },
-            { x: 'AU', y: 30 },
-            { x: 'XA really really really really really really really really really really long label', y: 80 },
+            { id: '0', x: 'AB', y: 50 },
+            { id: '1', x: 'NB', y: 75 },
+            { id: '2', x: 'SB', y: 60 },
+            { id: '3', x: 'AU', y: 30 },
+            { id: '4', x: 'XA really really really really really really really really really really long label', y: 80 },
           ]}
           units="management units"
           height={sizeStateResponsive.height}
diff --git a/test/js/TestHistogram.tsx b/test/js/TestHistogram.tsx
index c2f647f..b651e7c 100644
--- a/test/js/TestHistogram.tsx
+++ b/test/js/TestHistogram.tsx
@@ -11,16 +11,16 @@ const TestBarChart = () => {
       <ResizableCard title="Fixed Histogram" sizeState={sizeStateFixed} onSizeChange={setSizeStateFixed}>
         <Histogram
           data={[
-            { x: '0-9', y: 7 },
-            { x: '10-19', y: 15 },
-            { x: '20-29', y: 22 },
-            { x: '30-39', y: 13 },
-            { x: '40-49', y: 9 },
-            { x: '50-59', y: 5 },
-            { x: '60-69', y: 3 },
-            { x: '70-79', y: 2 },
-            { x: '80-89', y: 1 },
-            { x: '90-99', y: 1 },
+            { id: '0', x: '0-9', y: 7 },
+            { id: '1', x: '10-19', y: 15 },
+            { id: '2', x: '20-29', y: 22 },
+            { id: '3', x: '30-39', y: 13 },
+            { id: '4', x: '40-49', y: 9 },
+            { id: '5', x: '50-59', y: 5 },
+            { id: '6', x: '60-69', y: 3 },
+            { id: '7', x: '70-79', y: 2 },
+            { id: '8', x: '80-89', y: 1 },
+            { id: '9', x: '90-99', y: 1 },
           ]}
           units="management units"
           height={sizeStateFixed.height}
@@ -36,16 +36,16 @@ const TestBarChart = () => {
       <ResizableCard title="Responsive Histogram" sizeState={sizeStateResponsive} onSizeChange={setSizeStateResponsive}>
         <Histogram
           data={[
-            { x: '0-9', y: 7 },
-            { x: '10-19', y: 15 },
-            { x: '20-29', y: 22 },
-            { x: '30-39', y: 13 },
-            { x: '40-49', y: 9 },
-            { x: '50-59', y: 5 },
-            { x: '60-69', y: 3 },
-            { x: '70-79', y: 2 },
-            { x: '80-89', y: 1 },
-            { x: '90-99', y: 1 },
+            { id: '0', x: '0-9', y: 7 },
+            { id: '1', x: '10-19', y: 15 },
+            { id: '2', x: '20-29', y: 22 },
+            { id: '3', x: '30-39', y: 13 },
+            { id: '4', x: '40-49', y: 9 },
+            { id: '5', x: '50-59', y: 5 },
+            { id: '6', x: '60-69', y: 3 },
+            { id: '7', x: '70-79', y: 2 },
+            { id: '8', x: '80-89', y: 1 },
+            { id: '9', x: '90-99', y: 1 },
           ]}
           units="management units"
           height={sizeStateResponsive.height}
diff --git a/test/js/TestPieChart.tsx b/test/js/TestPieChart.tsx
index b2c05d2..864517e 100644
--- a/test/js/TestPieChart.tsx
+++ b/test/js/TestPieChart.tsx
@@ -3,9 +3,9 @@ import { PieChart } from '../../src/index';
 const TestPieChart = () => (
   <PieChart
     data={[
-      { x: 'AB this is a very very very very very very very very very very long label', y: 50 },
-      { x: 'NB', y: 75 },
-      { x: 'SB', y: 60 },
+      { id: '0', x: 'AB this is a very very very very very very very very very very long label', y: 50 },
+      { id: '1', x: 'NB', y: 75 },
+      { id: '2', x: 'SB', y: 60 },
     ]}
     onClick={(f) => {
       console.log(f);