@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/components/barCharts.md

@@ -3,12 +3,10 @@
 *Category:* Components
 *Section:* Charts
 *Source:* https://uikit.developers.rio.cloud/#/components/barCharts
-*Captured:* 2026-03-06T10:41:31.930Z
+*Captured:* 2026-04-20T12:55:38.181Z
 
 ## BarChart
 
-> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.
-
 ### Example: Simple horizontal BarChart
 
 Simple horizontal BarChart
@@ -22,35 +20,33 @@ import BarChart from '@rio-cloud/rio-uikit/BarChart';
 import Bar, { type RenderableText } from '@rio-cloud/rio-uikit/Bar';
 import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 
-export default () => {
-    return (
-        <>
-            <FormLabel>Simple horizontal BarChart</FormLabel>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    dataKey='label'
-                    xAxisOptions={{ dataKey: 'label' }}
-                    showYAxis={false}
-                    margin={{ bottom: 15 }}
-                    bars={[
-                        <Bar
-                            key='myBar'
-                            dataKey='costs'
-                            unit='€'
-                            color='brand-primary'
-                            radius={[3, 3, 0, 0]}
-                            label={{
-                                position: 'top',
-                                formatter: (value: RenderableText) => `${value} €`,
-                            }}
-                        />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <FormLabel>Simple horizontal BarChart</FormLabel>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
+            <BarChart
+                data={data}
+                dataKey='label'
+                xAxisOptions={{ dataKey: 'label' }}
+                showYAxis={false}
+                margin={{ bottom: 15 }}
+                bars={[
+                    <Bar
+                        key='myBar'
+                        dataKey='costs'
+                        unit='€'
+                        color='brand-primary'
+                        radius={[3, 3, 0, 0]}
+                        label={{
+                            position: 'top',
+                            formatter: (value: RenderableText) => `${value} €`,
+                        }}
+                    />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data = [
     {
@@ -99,9 +95,9 @@ const data = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts1-clip">
@@ -109,51 +105,63 @@ const data = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="7.8" y="55.9378" width="62" height="167.0622" class="recharts-rectangle" d="M7.8,58.9378A 3,3,0,0,1,10.8,55.9378L 66.8,55.9378A 3,3,0,0,1,
-        69.8,58.9378L 69.8,223L 7.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="60.3548" width="62" height="162.6452" class="recharts-rectangle" d="M7.8,63.3548A 3,3,0,0,1,10.8,60.3548L 66.8,60.3548A 3,3,0,0,1,
+        69.8,63.3548L 69.8,223L 7.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="85.8" y="144.4665" width="62" height="78.5335" class="recharts-rectangle" d="M85.8,147.4665A 3,3,0,0,1,88.8,144.4665L 144.8,144.4665A 3,3,0,0,1,
-        147.8,147.4665L 147.8,223L 85.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="146.5429" width="62" height="76.4571" class="recharts-rectangle" d="M85.8,149.5429A 3,3,0,0,1,88.8,146.5429L 144.8,146.5429A 3,3,0,0,1,
+        147.8,149.5429L 147.8,223L 85.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="163.8" y="178.7356" width="62" height="44.2644" class="recharts-rectangle" d="M163.8,181.7356A 3,3,0,0,1,166.8,178.7356L 222.8,178.7356A 3,3,0,0,1,
-        225.8,181.7356L 225.8,223L 163.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="179.906" width="62" height="43.094" class="recharts-rectangle" d="M163.8,182.906A 3,3,0,0,1,166.8,179.906L 222.8,179.906A 3,3,0,0,1,
+        225.8,182.906L 225.8,223L 163.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="241.8" y="209.1495" width="62" height="13.8505" class="recharts-rectangle" d="M241.8,212.1495A 3,3,0,0,1,244.8,209.1495L 300.8,209.1495A 3,3,0,0,1,
-        303.8,212.1495L 303.8,223L 241.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.5157" width="62" height="13.4843" class="recharts-rectangle" d="M241.8,212.5157A 3,3,0,0,1,244.8,209.5157L 300.8,209.5157A 3,3,0,0,1,
+        303.8,212.5157L 303.8,223L 241.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="319.8" y="211.4699" width="62" height="11.5301" class="recharts-rectangle" d="M319.8,214.4699A 3,3,0,0,1,322.8,211.4699L 378.8,211.4699A 3,3,0,0,1,
-        381.8,214.4699L 381.8,223L 319.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="211.7747" width="62" height="11.2253" class="recharts-rectangle" d="M319.8,214.7747A 3,3,0,0,1,322.8,211.7747L 378.8,211.7747A 3,3,0,0,1,
+        381.8,214.7747L 381.8,223L 319.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="undefined" x="397.8" y="206.3295" width="62" height="16.6705" class="recharts-rectangle" d="M397.8,209.3295A 3,3,0,0,1,400.8,206.3295L 456.8,206.3295A 3,3,0,0,1,
-        459.8,209.3295L 459.8,223L 397.8,223Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="206.7702" width="62" height="16.2298" class="recharts-rectangle" d="M397.8,209.7702A 3,3,0,0,1,400.8,206.7702L 456.8,206.7702A 3,3,0,0,1,
+        459.8,209.7702L 459.8,223L 397.8,223Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="0" y1="223" x2="468" y2="223">
                             </line>
@@ -187,15 +195,15 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="468" stroke="none" x="39" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -299,30 +307,28 @@ import BarChart from '@rio-cloud/rio-uikit/BarChart';
 import Bar from '@rio-cloud/rio-uikit/Bar';
 import FormLabel from '@rio-cloud/rio-uikit/FormLabel';
 
-export default () => {
-    return (
-        <>
-            <FormLabel>Horizontal BarChart</FormLabel>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    dataKey='label'
-                    showGrid
-                    xAxisOptions={{
-                        dataKey: 'label',
-                        label: { value: 'Timerange', offset: 0, position: 'bottom' },
-                    }}
-                    yAxisOptions={{
-                        unit: ' €',
-                        label: { value: 'Costs', angle: -90, position: 'insideLeft' },
-                    }}
-                    margin={{ bottom: 15 }}
-                    bars={[<Bar key='myBar' dataKey='costs' unit='€' radius={[3, 3, 0, 0]} barSize={20} />]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <FormLabel>Horizontal BarChart</FormLabel>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
+            <BarChart
+                data={data}
+                dataKey='label'
+                showGrid
+                xAxisOptions={{
+                    dataKey: 'label',
+                    label: { value: 'Timerange', offset: 0, position: 'bottom' },
+                }}
+                yAxisOptions={{
+                    unit: ' €',
+                    label: { value: 'Costs', angle: -90, position: 'insideLeft' },
+                }}
+                margin={{ bottom: 15 }}
+                bars={[<Bar key='myBar' dataKey='costs' unit='€' radius={[3, 3, 0, 0]} barSize={20} />]}
+            />
+        </div>
+    </>
+);
 
 const data = [
     {
@@ -360,7 +366,7 @@ const data = [
     <div class="recharts-responsive-container" style="width: 100%; height: 100%; min-width: 100px; min-height: 100px;">
         <div style="width: 0px; height: 0px; overflow: visible;">
             <div width="468" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 468px; height: 268px;">
-                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px;">
+                <div xmlns="http://www.w3.org/1999/xhtml" tabindex="-1" class="recharts-tooltip-wrapper recharts-tooltip-wrapper-right recharts-tooltip-wrapper-bottom" style="visibility: hidden; pointer-events: none; position: absolute; top: 0px; left: 0px; transform: translate(444px, 48px);">
                     <div class="recharts-default-tooltip" role="status" aria-live="assertive" style="margin: 0px; padding: 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(204, 204, 204); white-space: nowrap;">
                         <p class="recharts-tooltip-label" style="margin: 0px;">
                         </p>
@@ -371,7 +377,7 @@ const data = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="223" x2="468" y2="223">
@@ -405,7 +411,7 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts2-clip">
@@ -413,51 +419,63 @@ const data = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="84" y="49.06" width="20" height="173.94" class="recharts-rectangle" d="M84,52.06A 3,3,0,0,1,87,49.06L 101,49.06A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="84" y="49.06" width="20" height="173.94" class="recharts-rectangle" d="M84,52.06A 3,3,0,0,1,87,49.06L 101,49.06A 3,3,0,0,1,
         104,52.06L 104,223L 84,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="152" y="141.2333" width="20" height="81.7667" class="recharts-rectangle" d="M152,144.2333A 3,3,0,0,1,155,141.2333L 169,141.2333A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="152" y="141.2333" width="20" height="81.7667" class="recharts-rectangle" d="M152,144.2333A 3,3,0,0,1,155,141.2333L 169,141.2333A 3,3,0,0,1,
         172,144.2333L 172,223L 152,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="220" y="176.9133" width="20" height="46.0867" class="recharts-rectangle" d="M220,179.9133A 3,3,0,0,1,223,176.9133L 237,176.9133A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="220" y="176.9133" width="20" height="46.0867" class="recharts-rectangle" d="M220,179.9133A 3,3,0,0,1,223,176.9133L 237,176.9133A 3,3,0,0,1,
         240,179.9133L 240,223L 220,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="288" y="208.5793" width="20" height="14.4207" class="recharts-rectangle" d="M288,211.5793A 3,3,0,0,1,291,208.5793L 305,208.5793A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="288" y="208.5793" width="20" height="14.4207" class="recharts-rectangle" d="M288,211.5793A 3,3,0,0,1,291,208.5793L 305,208.5793A 3,3,0,0,1,
         308,211.5793L 308,223L 288,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="356" y="210.9952" width="20" height="12.0048" class="recharts-rectangle" d="M356,213.9952A 3,3,0,0,1,359,210.9952L 373,210.9952A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="356" y="210.9952" width="20" height="12.0048" class="recharts-rectangle" d="M356,213.9952A 3,3,0,0,1,359,210.9952L 373,210.9952A 3,3,0,0,1,
         376,213.9952L 376,223L 356,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="424" y="205.6432" width="20" height="17.3568" class="recharts-rectangle" d="M424,208.6432A 3,3,0,0,1,427,205.6432L 441,205.6432A 3,3,0,0,1,
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="424" y="205.6432" width="20" height="17.3568" class="recharts-rectangle" d="M424,208.6432A 3,3,0,0,1,427,205.6432L 441,205.6432A 3,3,0,0,1,
         444,208.6432L 444,223L 424,223Z">
-                                        </path>
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="223" x2="468" y2="223">
                             </line>
@@ -519,15 +537,15 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="408" stroke="none" x="94" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -673,37 +691,35 @@ type CustomData = {
     pv: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Multiple Bars BarChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 min-width-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    dataKey='name'
-                    legend={
-                        <Legend
-                            layout='horizontal'
-                            verticalAlign='bottom'
-                            align='center'
-                            formatter={(value: string | number, _entry: LegendPayload) => (
-                                <span className='text-color-dark'>{value}</span>
-                            )}
-                        />
-                    }
-                    showGrid
-                    gridOptions={{ vertical: false }}
-                    xAxisOptions={{ dataKey: 'name' }}
-                    yAxisOptions={{ width: 40 }}
-                    bars={[
-                        <Bar key='pv' dataKey='pv' color='color-coldplay-moos' />,
-                        <Bar key='uv' dataKey='uv' color='color-warmup-crimson' />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Multiple Bars BarChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 min-width-300 max-width-500'>
+            <BarChart
+                data={data}
+                dataKey='name'
+                legend={
+                    <Legend
+                        layout='horizontal'
+                        verticalAlign='bottom'
+                        align='center'
+                        formatter={(value: string | number, _entry: LegendPayload) => (
+                            <span className='text-color-dark'>{value}</span>
+                        )}
+                    />
+                }
+                showGrid
+                gridOptions={{ vertical: false }}
+                xAxisOptions={{ dataKey: 'name' }}
+                yAxisOptions={{ width: 40 }}
+                bars={[
+                    <Bar key='pv' dataKey='pv' color='color-coldplay-moos' />,
+                    <Bar key='uv' dataKey='uv' color='color-warmup-crimson' />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     { name: 'Page A', uv: 4000, pv: 2400 },
@@ -733,7 +749,7 @@ const data: CustomData[] = [
                 <div class="recharts-legend-wrapper" style="position: absolute; width: 458px; height: auto; left: 5px; bottom: 5px;">
                     <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: center;">
                         <li class="recharts-legend-item legend-item-0" style="display: inline-block; margin-right: 10px;">
-                            <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                            <svg aria-label="pv legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                 <title>
                                 </title>
                                 <desc>
@@ -746,7 +762,7 @@ const data: CustomData[] = [
                             </span>
                         </li>
                         <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
-                            <svg aria-label="[object Object] legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
+                            <svg aria-label="uv legend icon" class="recharts-surface" width="12" height="12" viewBox="0 0 32 32" style="display: inline-block; vertical-align: middle; margin-right: 4px;">
                                 <title>
                                 </title>
                                 <desc>
@@ -765,7 +781,7 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
@@ -781,7 +797,7 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts3-clip">
@@ -789,41 +805,55 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page A" x="50.9714" y="163.08" width="21" height="49.92" radius="0" class="recharts-rectangle" d="M 50.9714,163.08 h 21 v 49.92 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page A" x="50.9714" y="163.08" width="21" height="49.92" radius="0" class="recharts-rectangle" d="M 50.9714,163.08 h 21 v 49.92 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page B" x="110.6857" y="183.9216" width="21" height="29.0784" radius="0" class="recharts-rectangle" d="M 110.6857,183.9216 h 21 v 29.0784 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page B" x="110.6857" y="183.9216" width="21" height="29.0784" radius="0" class="recharts-rectangle" d="M 110.6857,183.9216 h 21 v 29.0784 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page C" x="170.4" y="9.16" width="21" height="203.84" radius="0" class="recharts-rectangle" d="M 170.4,9.16 h 21 v 203.84 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page C" x="170.4" y="9.16" width="21" height="203.84" radius="0" class="recharts-rectangle" d="M 170.4,9.16 h 21 v 203.84 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page D" x="230.1143" y="131.7136" width="21" height="81.2864" radius="0" class="recharts-rectangle" d="M 230.1143,131.7136 h 21 v 81.2864 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page D" x="230.1143" y="131.7136" width="21" height="81.2864" radius="0" class="recharts-rectangle" d="M 230.1143,131.7136 h 21 v 81.2864 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page E" x="289.8286" y="113.16" width="21" height="99.84" radius="0" class="recharts-rectangle" d="M 289.8286,113.16 h 21 v 99.84 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page E" x="289.8286" y="113.16" width="21" height="99.84" radius="0" class="recharts-rectangle" d="M 289.8286,113.16 h 21 v 99.84 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page F" x="349.5429" y="133.96" width="21" height="79.04" radius="0" class="recharts-rectangle" d="M 349.5429,133.96 h 21 v 79.04 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page F" x="349.5429" y="133.96" width="21" height="79.04" radius="0" class="recharts-rectangle" d="M 349.5429,133.96 h 21 v 79.04 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page G" x="409.2571" y="123.56" width="21" height="89.44" radius="0" class="recharts-rectangle" d="M 409.2571,123.56 h 21 v 89.44 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page G" x="409.2571" y="123.56" width="21" height="89.44" radius="0" class="recharts-rectangle" d="M 409.2571,123.56 h 21 v 89.44 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
@@ -832,40 +862,54 @@ const data: CustomData[] = [
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page A" x="75.9714" y="129.8" width="21" height="83.2" radius="0" class="recharts-rectangle" d="M 75.9714,129.8 h 21 v 83.2 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page A" x="75.9714" y="129.8" width="21" height="83.2" radius="0" class="recharts-rectangle" d="M 75.9714,129.8 h 21 v 83.2 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page B" x="135.6857" y="150.6" width="21" height="62.4" radius="0" class="recharts-rectangle" d="M 135.6857,150.6 h 21 v 62.4 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page B" x="135.6857" y="150.6" width="21" height="62.4" radius="0" class="recharts-rectangle" d="M 135.6857,150.6 h 21 v 62.4 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page C" x="195.4" y="171.4" width="21" height="41.6" radius="0" class="recharts-rectangle" d="M 195.4,171.4 h 21 v 41.6 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page C" x="195.4" y="171.4" width="21" height="41.6" radius="0" class="recharts-rectangle" d="M 195.4,171.4 h 21 v 41.6 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page D" x="255.1143" y="155.176" width="21" height="57.824" radius="0" class="recharts-rectangle" d="M 255.1143,155.176 h 21 v 57.824 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page D" x="255.1143" y="155.176" width="21" height="57.824" radius="0" class="recharts-rectangle" d="M 255.1143,155.176 h 21 v 57.824 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page E" x="314.8286" y="173.688" width="21" height="39.312" radius="0" class="recharts-rectangle" d="M 314.8286,173.688 h 21 v 39.312 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page E" x="314.8286" y="173.688" width="21" height="39.312" radius="0" class="recharts-rectangle" d="M 314.8286,173.688 h 21 v 39.312 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page F" x="374.5429" y="163.288" width="21" height="49.712" radius="0" class="recharts-rectangle" d="M 374.5429,163.288 h 21 v 49.712 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page F" x="374.5429" y="163.288" width="21" height="49.712" radius="0" class="recharts-rectangle" d="M 374.5429,163.288 h 21 v 49.712 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#31144f " name="Page G" x="434.2571" y="140.408" width="21" height="72.592" radius="0" class="recharts-rectangle" d="M 434.2571,140.408 h 21 v 72.592 h -21 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#31144f " name="Page G" x="434.2571" y="140.408" width="21" height="72.592" radius="0" class="recharts-rectangle" d="M 434.2571,140.408 h 21 v 72.592 h -21 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                             </line>
@@ -931,15 +975,15 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -1078,28 +1122,26 @@ import BarChart from '@rio-cloud/rio-uikit/BarChart';
 import Bar from '@rio-cloud/rio-uikit/Bar';
 import Legend from '@rio-cloud/rio-uikit/Legend';
 
-export default () => {
-    return (
-        <>
-            <label>Stacked BarChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    dataKey='name'
-                    legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}
-                    showGrid
-                    gridOptions={{ vertical: false }}
-                    xAxisOptions={{ dataKey: 'name' }}
-                    yAxisOptions={{ width: 40 }}
-                    bars={[
-                        <Bar key='pv' dataKey='pv' stackId='a' barSize={26} color='color-coldplay-moos' />,
-                        <Bar key='uv' dataKey='uv' stackId='a' barSize={26} color='color-coldplay-fountain' />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Stacked BarChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
+            <BarChart
+                data={data}
+                dataKey='name'
+                legend={<Legend layout='horizontal' verticalAlign='bottom' align='center' />}
+                showGrid
+                gridOptions={{ vertical: false }}
+                xAxisOptions={{ dataKey: 'name' }}
+                yAxisOptions={{ width: 40 }}
+                bars={[
+                    <Bar key='pv' dataKey='pv' stackId='a' barSize={26} color='color-coldplay-moos' />,
+                    <Bar key='uv' dataKey='uv' stackId='a' barSize={26} color='color-coldplay-fountain' />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data = [
     {
@@ -1185,7 +1227,7 @@ const data = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
@@ -1201,7 +1243,7 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts4-clip">
@@ -1209,41 +1251,55 @@ const data = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#a1daa3 " name="Page G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#a1daa3 " name="Page G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
@@ -1252,40 +1308,54 @@ const data = [
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="Page G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="Page G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                             </line>
@@ -1351,15 +1421,15 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -1506,66 +1576,64 @@ type CustomData = {
     costs: number;
 };
 
-export default () => {
-    return (
-        <>
-            <label>Vertical BarChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    layout='vertical'
-                    useDataColors
-                    legend={
-                        <Legend
-                            iconSize={12}
-                            items={data}
-                            content={({ items, iconSize, resolveColor }) => (
-                                <div className=''>
-                                    {items?.map((entry, i) => (
-                                        <div key={i}>
-                                            <span
-                                                className='display-inline-block margin-right-5 rounded-small'
-                                                style={{
-                                                    width: iconSize,
-                                                    height: iconSize,
-                                                    background: resolveColor(entry, i),
-                                                }}
-                                            />
-                                            <span className='text-color-dark'>{entry.label}</span>
-                                        </div>
-                                    ))}
-                                </div>
-                            )}
-                        />
-                    }
-                    xAxisOptions={{
-                        dataKey: 'costs',
-                        type: 'number',
-                        height: 14,
-                    }}
-                    yAxisOptions={{
-                        dataKey: 'label',
-                        type: 'category',
-                        width: 10,
-                        tickLine: false,
-                        axisLine: false,
-                        tickMargin: 200,
-                    }}
-                    bars={[
-                        <Bar
-                            key='costs'
-                            dataKey='costs'
-                            label={{
-                                position: 'right',
-                                formatter: (value: unknown) => `${value}€`,
-                            }}
-                        />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Vertical BarChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
+            <BarChart
+                data={data}
+                layout='vertical'
+                useDataColors
+                legend={
+                    <Legend
+                        iconSize={12}
+                        items={data}
+                        content={({ items, iconSize, resolveColor }) => (
+                            <div className=''>
+                                {items?.map((entry, i) => (
+                                    <div key={i}>
+                                        <span
+                                            className='display-inline-block margin-right-5 rounded-small'
+                                            style={{
+                                                width: iconSize,
+                                                height: iconSize,
+                                                background: resolveColor(entry, i),
+                                            }}
+                                        />
+                                        <span className='text-color-dark'>{entry.label}</span>
+                                    </div>
+                                ))}
+                            </div>
+                        )}
+                    />
+                }
+                xAxisOptions={{
+                    dataKey: 'costs',
+                    type: 'number',
+                    height: 14,
+                }}
+                yAxisOptions={{
+                    dataKey: 'label',
+                    type: 'category',
+                    width: 10,
+                    tickLine: false,
+                    axisLine: false,
+                    tickMargin: 200,
+                }}
+                bars={[
+                    <Bar
+                        key='costs'
+                        dataKey='costs'
+                        label={{
+                            position: 'right',
+                            formatter: (value: unknown) => `${value}€`,
+                        }}
+                    />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data: CustomData[] = [
     {
@@ -1634,9 +1702,9 @@ const data: CustomData[] = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts5-clip">
@@ -1644,37 +1712,45 @@ const data: CustomData[] = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r6:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#c9778d " name="undefined" color="color-warmup-charm" x="15" y="11.1" width="290.0503" height="48" radius="0" class="recharts-rectangle" d="M 15,11.1 h 290.0503 v 48 h -290.0503 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#c9778d " name="undefined" color="color-warmup-charm" x="15" y="11.1" width="290.0503" height="48" radius="0" class="recharts-rectangle" d="M 15,11.1 h 290.0503 v 48 h -290.0503 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#f19588 " name="undefined" color="color-warmup-salmon" x="15" y="72.1" width="136.3484" height="48" radius="0" class="recharts-rectangle" d="M 15,72.1 h 136.3484 v 48 h -136.3484 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#f19588 " name="undefined" color="color-warmup-salmon" x="15" y="72.1" width="136.3484" height="48" radius="0" class="recharts-rectangle" d="M 15,72.1 h 136.3484 v 48 h -136.3484 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#f5bb89 " name="undefined" color="color-warmup-cherokee" x="15" y="133.1" width="76.8509" height="48" radius="0" class="recharts-rectangle" d="M 15,133.1 h 76.8509 v 48 h -76.8509 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#f5bb89 " name="undefined" color="color-warmup-cherokee" x="15" y="133.1" width="76.8509" height="48" radius="0" class="recharts-rectangle" d="M 15,133.1 h 76.8509 v 48 h -76.8509 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#ff8e3c " name="undefined" color="brand-warning" x="15" y="194.1" width="24.0469" height="48" radius="0" class="recharts-rectangle" d="M 15,194.1 h 24.0469 v 48 h -24.0469 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#ff8e3c " name="undefined" color="brand-warning" x="15" y="194.1" width="24.0469" height="48" radius="0" class="recharts-rectangle" d="M 15,194.1 h 24.0469 v 48 h -24.0469 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="249" x2="386.859375" y2="249">
                             </line>
@@ -1718,15 +1794,15 @@ const data: CustomData[] = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="14" orientation="bottom" width="371.859375" stroke="none" x="15" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -2004,7 +2080,7 @@ const data = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
@@ -2020,7 +2096,7 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts6-clip">
@@ -2028,41 +2104,55 @@ const data = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r7:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#268897 " name="Truck G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#268897 " name="Truck G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
@@ -2071,40 +2161,54 @@ const data = [
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#30b4c0 " name="Truck G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#30b4c0 " name="Truck G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                             </line>
@@ -2170,15 +2274,15 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
@@ -2314,33 +2418,31 @@ import BarChart from '@rio-cloud/rio-uikit/BarChart';
 import Bar from '@rio-cloud/rio-uikit/Bar';
 import XAxis from '@rio-cloud/rio-uikit/XAxis';
 
-export default () => {
-    return (
-        <>
-            <label>Multiple axis BarChart</label>
-            <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
-                <BarChart
-                    data={data}
-                    dataKey='label'
-                    showGrid
-                    xAxisOptions={{
-                        dataKey: 'label',
-                        label: { value: 'Timerange', offset: 30, position: 'bottom' },
-                    }}
-                    yAxisOptions={{
-                        unit: ' €',
-                        label: { value: 'Costs', angle: -90, position: 'insideLeft' },
-                    }}
-                    margin={{ bottom: 15 }}
-                    bars={[<Bar key='myBar' dataKey='costs' unit='€' />]}
-                    additionalAxes={[
-                        <XAxis key='quarterAxis' xAxisId='quarterAxis' dataKey='quarter' orientation='bottom' />,
-                    ]}
-                />
-            </div>
-        </>
-    );
-};
+export default () => (
+    <>
+        <label>Multiple axis BarChart</label>
+        <div className='panel panel-default panel-body margin-bottom-0 height-300 max-width-500'>
+            <BarChart
+                data={data}
+                dataKey='label'
+                showGrid
+                xAxisOptions={{
+                    dataKey: 'label',
+                    label: { value: 'Timerange', offset: 30, position: 'bottom' },
+                }}
+                yAxisOptions={{
+                    unit: ' €',
+                    label: { value: 'Costs', angle: -90, position: 'insideLeft' },
+                }}
+                margin={{ bottom: 15 }}
+                bars={[<Bar key='myBar' dataKey='costs' unit='€' />]}
+                additionalAxes={[
+                    <XAxis key='quarterAxis' xAxisId='quarterAxis' dataKey='quarter' orientation='bottom' />,
+                ]}
+            />
+        </div>
+    </>
+);
 
 const data = [
     { label: 'January', costs: 46.8, quarter: 'Q1' },
@@ -2371,7 +2473,7 @@ const data = [
                     </title>
                     <desc>
                     </desc>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-100">
                         <g class="recharts-cartesian-grid">
                             <g class="recharts-cartesian-grid-horizontal">
                                 <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="193" x2="468" y2="193">
@@ -2405,7 +2507,7 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                     </g>
                     <defs>
                         <clipPath id="recharts7-clip">
@@ -2413,45 +2515,57 @@ const data = [
                             </rect>
                         </clipPath>
                     </defs>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                         <g class="recharts-layer recharts-bar" id="recharts-bar-:r9:">
                             <g class="recharts-layer recharts-bar-rectangles">
                                 <g class="recharts-layer">
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="66.8" y="42.46" width="54" height="150.54" radius="0" class="recharts-rectangle" d="M 66.8,42.46 h 54 v 150.54 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="66.8" y="42.46" width="54" height="150.54" radius="0" class="recharts-rectangle" d="M 66.8,42.46 h 54 v 150.54 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="134.8" y="122.2333" width="54" height="70.7667" radius="0" class="recharts-rectangle" d="M 134.8,122.2333 h 54 v 70.7667 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="134.8" y="122.2333" width="54" height="70.7667" radius="0" class="recharts-rectangle" d="M 134.8,122.2333 h 54 v 70.7667 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="202.8" y="153.1133" width="54" height="39.8867" radius="0" class="recharts-rectangle" d="M 202.8,153.1133 h 54 v 39.8867 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="202.8" y="153.1133" width="54" height="39.8867" radius="0" class="recharts-rectangle" d="M 202.8,153.1133 h 54 v 39.8867 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="270.8" y="180.5193" width="54" height="12.4807" radius="0" class="recharts-rectangle" d="M 270.8,180.5193 h 54 v 12.4807 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="270.8" y="180.5193" width="54" height="12.4807" radius="0" class="recharts-rectangle" d="M 270.8,180.5193 h 54 v 12.4807 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="338.8" y="182.6102" width="54" height="10.3898" radius="0" class="recharts-rectangle" d="M 338.8,182.6102 h 54 v 10.3898 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="338.8" y="182.6102" width="54" height="10.3898" radius="0" class="recharts-rectangle" d="M 338.8,182.6102 h 54 v 10.3898 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                     <g class="recharts-layer recharts-bar-rectangle">
-                                        <path fill="#67abc5 " name="undefined" x="406.8" y="177.9782" width="54" height="15.0218" radius="0" class="recharts-rectangle" d="M 406.8,177.9782 h 54 v 15.0218 h -54 Z">
-                                        </path>
+                                        <g class="recharts-layer recharts-inactive-bar">
+                                            <path fill="#67abc5 " name="undefined" x="406.8" y="177.9782" width="54" height="15.0218" radius="0" class="recharts-rectangle" d="M 406.8,177.9782 h 54 v 15.0218 h -54 Z">
+                                            </path>
+                                        </g>
                                     </g>
                                 </g>
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                         <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                             <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="193" x2="468" y2="193">
                             </line>
@@ -2545,15 +2659,15 @@ const data = [
                             </g>
                         </g>
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                     </g>
-                    <g tabindex="-1">
+                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                         <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                             <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                 <text height="30" orientation="bottom" width="408" stroke="none" x="94" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">