@rio-cloud/uikit-mcp 1.0.0 → 1.1.0

package/dist/docs/components/barCharts.md

@@ -0,0 +1,2785 @@
+# BarChart
+
+*Category:* Components
+*Section:* Charts
+*Source:* https://uikit.developers.rio.cloud/#components/barCharts
+*Captured:* 2025-12-12T12:39:25.288Z
+
+## 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
+
+JanuaryFebruaryMarchAprilMayJune
+
+#### Summary
+
+Simple horizontal BarChart
+
+JanuaryFebruaryMarchAprilMayJune
+
+#### React (tsx)
+
+```tsx
+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>
+        </>
+    );
+};
+
+const data = [
+    {
+        label: 'January',
+        costs: 46.8,
+    },
+    {
+        label: 'February',
+        costs: 22.0,
+    },
+    {
+        label: 'March',
+        costs: 12.4,
+    },
+    {
+        label: 'April',
+        costs: 3.88,
+    },
+    {
+        label: 'May',
+        costs: 3.23,
+    },
+    {
+        label: 'June',
+        costs: 4.67,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Simple horizontal BarChart</div>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r1:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r2:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts1-clip">
+                            <rect x="0" y="0" height="223" width="468">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r4:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r5:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r6:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r3:">
+                            <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="49.06000000000002" width="62" height="173.94" class="recharts-rectangle" d="M7.8,52.06000000000002A 3,3,0,0,1,10.8,49.06000000000002L 66.8,49.06000000000002A 3,3,0,0,1,
+        69.8,52.06000000000002L 69.8,223L 7.8,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="undefined" x="85.8" y="141.23333333333332" width="62" height="81.76666666666668" class="recharts-rectangle" d="M85.8,144.23333333333332A 3,3,0,0,1,88.8,141.23333333333332L 144.8,141.23333333333332A 3,3,0,0,1,
+        147.8,144.23333333333332L 147.8,223L 85.8,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="undefined" x="163.8" y="176.91333333333333" width="62" height="46.08666666666667" class="recharts-rectangle" d="M163.8,179.91333333333333A 3,3,0,0,1,166.8,176.91333333333333L 222.8,176.91333333333333A 3,3,0,0,1,
+        225.8,179.91333333333333L 225.8,223L 163.8,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="undefined" x="241.8" y="208.57933333333332" width="62" height="14.420666666666676" class="recharts-rectangle" d="M241.8,211.57933333333332A 3,3,0,0,1,244.8,208.57933333333332L 300.8,208.57933333333332A 3,3,0,0,1,
+        303.8,211.57933333333332L 303.8,223L 241.8,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="undefined" x="319.8" y="210.99516666666668" width="62" height="12.004833333333323" class="recharts-rectangle" d="M319.8,213.99516666666668A 3,3,0,0,1,322.8,210.99516666666668L 378.8,210.99516666666668A 3,3,0,0,1,
+        381.8,213.99516666666668L 381.8,223L 319.8,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="undefined" x="397.8" y="205.64316666666667" width="62" height="17.356833333333327" class="recharts-rectangle" d="M397.8,208.64316666666667A 3,3,0,0,1,400.8,205.64316666666667L 456.8,205.64316666666667A 3,3,0,0,1,
+        459.8,208.64316666666667L 459.8,223L 397.8,223Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r7:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r8:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="229" x2="39" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="117" y1="229" x2="117" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="195" y1="229" x2="195" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273" y1="229" x2="273" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="351" y1="229" x2="351" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="429" y1="229" x2="429" y2="223">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r9:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:ra:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:rb:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:rc:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:rd:">
+                        <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">
+                                    <tspan x="39" dy="0.71em">January</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="468" stroke="none" x="117" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="117" dy="0.71em">February</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="468" stroke="none" x="195" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="195" dy="0.71em">March</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="468" stroke="none" x="273" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="273" dy="0.71em">April</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="468" stroke="none" x="351" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="351" dy="0.71em">May</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="468" stroke="none" x="429" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="429" dy="0.71em">June</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-label-list">
+                            <text width="62" height="49.06000000000002" offset="5" x="38.8" y="44.06000000000002" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="38.8" dy="0em">46.8 €</tspan>
+                            </text>
+                            <text width="62" height="141.23333333333332" offset="5" x="116.8" y="136.23333333333332" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="116.8" dy="0em">22 €</tspan>
+                            </text>
+                            <text width="62" height="176.91333333333333" offset="5" x="194.8" y="171.91333333333333" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="194.8" dy="0em">12.4 €</tspan>
+                            </text>
+                            <text width="62" height="208.57933333333332" offset="5" x="272.8" y="203.57933333333332" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="272.8" dy="0em">3.88 €</tspan>
+                            </text>
+                            <text width="62" height="210.99516666666668" offset="5" x="350.8" y="205.99516666666668" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="350.8" dy="0em">3.23 €</tspan>
+                            </text>
+                            <text width="62" height="205.64316666666667" offset="5" x="428.8" y="200.64316666666667" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                                <tspan x="428.8" dy="0em">4.67 €</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Horizontal BarChart
+
+Horizontal BarChart
+
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs
+
+#### Summary
+
+Horizontal BarChart
+
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €Costs
+
+#### React (tsx)
+
+```tsx
+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>
+        </>
+    );
+};
+
+const data = [
+    {
+        label: 'January',
+        costs: 46.8,
+    },
+    {
+        label: 'February',
+        costs: 22.0,
+    },
+    {
+        label: 'March',
+        costs: 12.4,
+    },
+    {
+        label: 'April',
+        costs: 3.88,
+    },
+    {
+        label: 'May',
+        costs: 3.23,
+    },
+    {
+        label: 'June',
+        costs: 4.67,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Horizontal BarChart</div>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:re:">
+                        <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">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="167.25" x2="468" y2="167.25">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="111.5" x2="468" y2="111.5">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="55.75" x2="468" y2="55.75">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="0" x2="468" y2="0">
+                                </line>
+                            </g>
+                            <g class="recharts-cartesian-grid-vertical">
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="94" y1="0" x2="94" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="162" y1="0" x2="162" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="230" y1="0" x2="230" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="298" y1="0" x2="298" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="366" y1="0" x2="366" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="434" y1="0" x2="434" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="0" x2="60" y2="223">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="468" y1="0" x2="468" y2="223">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:rf:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts2-clip">
+                            <rect x="60" y="0" height="223" width="408">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:rh:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:ri:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:rj:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:rg:">
+                            <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.06000000000002" width="20" height="173.94" class="recharts-rectangle" d="M84,52.06000000000002A 3,3,0,0,1,87,49.06000000000002L 101,49.06000000000002A 3,3,0,0,1,
+        104,52.06000000000002L 104,223L 84,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="152" y="141.23333333333332" width="20" height="81.76666666666668" class="recharts-rectangle" d="M152,144.23333333333332A 3,3,0,0,1,155,141.23333333333332L 169,141.23333333333332A 3,3,0,0,1,
+        172,144.23333333333332L 172,223L 152,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="220" y="176.91333333333333" width="20" height="46.08666666666667" class="recharts-rectangle" d="M220,179.91333333333333A 3,3,0,0,1,223,176.91333333333333L 237,176.91333333333333A 3,3,0,0,1,
+        240,179.91333333333333L 240,223L 220,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="288" y="208.57933333333332" width="20" height="14.420666666666676" class="recharts-rectangle" d="M288,211.57933333333332A 3,3,0,0,1,291,208.57933333333332L 305,208.57933333333332A 3,3,0,0,1,
+        308,211.57933333333332L 308,223L 288,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="356" y="210.99516666666668" width="20" height="12.004833333333323" class="recharts-rectangle" d="M356,213.99516666666668A 3,3,0,0,1,359,210.99516666666668L 373,210.99516666666668A 3,3,0,0,1,
+        376,213.99516666666668L 376,223L 356,223Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="424" y="205.64316666666667" width="20" height="17.356833333333327" class="recharts-rectangle" d="M424,208.64316666666667A 3,3,0,0,1,427,205.64316666666667L 441,205.64316666666667A 3,3,0,0,1,
+        444,208.64316666666667L 444,223L 424,223Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:rk:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:rl:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="94" y1="229" x2="94" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="162" y1="229" x2="162" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="230" y1="229" x2="230" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="298" y1="229" x2="298" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="366" y1="229" x2="366" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="434" y1="229" x2="434" y2="223">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="0" x2="60" y2="223">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="223" x2="60" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="167.25" x2="60" y2="167.25">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="111.5" x2="60" y2="111.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="55.75" x2="60" y2="55.75">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="223" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="0" x2="60" y2="0">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:rm:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:rn:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:ro:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:rp:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:rq:">
+                        <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">
+                                    <tspan x="94" dy="0.71em">January</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="162" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="162" dy="0.71em">February</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="230" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="230" dy="0.71em">March</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="298" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="298" dy="0.71em">April</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="366" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="366" dy="0.71em">May</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="434" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="434" dy="0.71em">June</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <text offset="0" x="264" y="253" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                            <tspan x="264" dy="0.71em">Timerange</tspan>
+                        </text>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="223" stroke="none" x="52" y="223" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">0 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="223" stroke="none" x="52" y="167.25" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">15 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="223" stroke="none" x="52" y="111.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">30 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="223" stroke="none" x="52" y="55.75" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">45 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="223" stroke="none" x="52" y="10" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">60 €</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <text offset="5" transform="rotate(-90, 5, 111.5)" x="5" y="111.5" class="recharts-text recharts-label" text-anchor="start" fill="#808080">
+                            <tspan x="5" dy="0.355em">Costs</tspan>
+                        </text>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: pv
+
+Multiple Bars BarChart
+
+pv
+uv
+
+Page APage BPage CPage DPage EPage FPage G025005000750010000
+
+#### Summary
+
+Multiple Bars BarChart
+
+pv
+uv
+
+Page APage BPage CPage DPage EPage FPage G025005000750010000
+
+#### React (tsx)
+
+```tsx
+import BarChart from '@rio-cloud/rio-uikit/BarChart';
+import Bar from '@rio-cloud/rio-uikit/Bar';
+import Legend, { type LegendPayload } from '@rio-cloud/rio-uikit/Legend';
+
+type CustomData = {
+    name: string;
+    uv: number;
+    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>
+        </>
+    );
+};
+
+const data: CustomData[] = [
+    { name: 'Page A', uv: 4000, pv: 2400 },
+    { name: 'Page B', uv: 3000, pv: 1398 },
+    { name: 'Page C', uv: 2000, pv: 9800 },
+    { name: 'Page D', uv: 2780, pv: 3908 },
+    { name: 'Page E', uv: 1890, pv: 4800 },
+    { name: 'Page F', uv: 2390, pv: 3800 },
+    { name: 'Page G', uv: 3490, pv: 4300 },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>Multiple Bars BarChart</label>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 min-width-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
+                                <span class="text-color-dark">pv</span>
+                            </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;">
+                                <title>
+                                </title>
+                                <desc>
+                                </desc>
+                                <path fill="#31144f " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(49, 20, 79);">
+                                <span class="text-color-dark">uv</span>
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:rr:">
+                        <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">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="161" x2="463" y2="161">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="109" x2="463" y2="109">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="57" x2="463" y2="57">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="5" x2="463" y2="5">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:rs:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts3-clip">
+                            <rect x="45" y="5" height="208" width="418">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:rv:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r10:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r11:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:rt:">
+                            <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.971428571428575" y="163.07999999999998" width="21" height="49.920000000000016" radius="0" class="recharts-rectangle" d="M 50.971428571428575,163.07999999999998 h 21 v 49.920000000000016 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page B" x="110.6857142857143" y="183.9216" width="21" height="29.078399999999988" radius="0" class="recharts-rectangle" d="M 110.6857142857143,183.9216 h 21 v 29.078399999999988 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page C" x="170.4" y="9.160000000000004" width="21" height="203.84" radius="0" class="recharts-rectangle" d="M 170.4,9.160000000000004 h 21 v 203.84 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page D" x="230.1142857142857" y="131.7136" width="21" height="81.28639999999999" radius="0" class="recharts-rectangle" d="M 230.1142857142857,131.7136 h 21 v 81.28639999999999 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page E" x="289.8285714285715" y="113.16000000000001" width="21" height="99.83999999999999" radius="0" class="recharts-rectangle" d="M 289.8285714285715,113.16000000000001 h 21 v 99.83999999999999 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page F" x="349.54285714285714" y="133.96" width="21" height="79.03999999999999" radius="0" class="recharts-rectangle" d="M 349.54285714285714,133.96 h 21 v 79.03999999999999 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page G" x="409.25714285714287" y="123.56000000000002" width="21" height="89.43999999999998" radius="0" class="recharts-rectangle" d="M 409.25714285714287,123.56000000000002 h 21 v 89.43999999999998 h -21 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:ru:">
+                            <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.97142857142858" y="129.8" width="21" height="83.19999999999999" radius="0" class="recharts-rectangle" d="M 75.97142857142858,129.8 h 21 v 83.19999999999999 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page B" x="135.68571428571428" y="150.6" width="21" height="62.400000000000006" radius="0" class="recharts-rectangle" d="M 135.68571428571428,150.6 h 21 v 62.400000000000006 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page C" x="195.4" y="171.4" width="21" height="41.599999999999994" radius="0" class="recharts-rectangle" d="M 195.4,171.4 h 21 v 41.599999999999994 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page D" x="255.1142857142857" y="155.176" width="21" height="57.82400000000001" radius="0" class="recharts-rectangle" d="M 255.1142857142857,155.176 h 21 v 57.82400000000001 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page E" x="314.8285714285715" y="173.688" width="21" height="39.31200000000001" radius="0" class="recharts-rectangle" d="M 314.8285714285715,173.688 h 21 v 39.31200000000001 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page F" x="374.54285714285714" y="163.28799999999998" width="21" height="49.71200000000002" radius="0" class="recharts-rectangle" d="M 374.54285714285714,163.28799999999998 h 21 v 49.71200000000002 h -21 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#31144f " name="Page G" x="434.25714285714287" y="140.40800000000002" width="21" height="72.59199999999998" radius="0" class="recharts-rectangle" d="M 434.25714285714287,140.40800000000002 h 21 v 72.59199999999998 h -21 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r12:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r13:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74.85714285714286" y1="219" x2="74.85714285714286" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="134.57142857142858" y1="219" x2="134.57142857142858" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="194.2857142857143" y1="219" x2="194.2857142857143" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="254" y1="219" x2="254" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="313.7142857142857" y1="219" x2="313.7142857142857" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="373.4285714285714" y1="219" x2="373.4285714285714" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="433.1428571428571" y1="219" x2="433.1428571428571" y2="213">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="5" x2="45" y2="213">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="213" x2="45" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="161" x2="45" y2="161">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="109" x2="45" y2="109">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="57" x2="45" y2="57">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="5" x2="45" y2="5">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r14:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:r15:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:r16:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:r17:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:r18:">
+                        <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">
+                                    <tspan x="74.85714285714286" dy="0.71em">Page A</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="134.57142857142858" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="134.57142857142858" dy="0.71em">Page B</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="194.2857142857143" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="194.2857142857143" dy="0.71em">Page C</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="254" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="254" dy="0.71em">Page D</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="313.7142857142857" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="313.7142857142857" dy="0.71em">Page E</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="373.4285714285714" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="373.4285714285714" dy="0.71em">Page F</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="433.1428571428571" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="433.1428571428571" dy="0.71em">Page G</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">0</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="161" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">2500</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="109" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">5000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="57" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">7500</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="10" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">10000</tspan>
+                                </text>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 4
+
+Stacked BarChart
+
+pv
+uv
+
+Page APage BPage CPage DPage EPage FPage G030006000900012000
+
+#### Summary
+
+Stacked BarChart
+
+pv
+uv
+
+Page APage BPage CPage DPage EPage FPage G030006000900012000
+
+#### React (tsx)
+
+```tsx
+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>
+        </>
+    );
+};
+
+const data = [
+    {
+        name: 'Page A',
+        uv: 4000,
+        pv: 2400,
+    },
+    {
+        name: 'Page B',
+        uv: 3000,
+        pv: 1398,
+    },
+    {
+        name: 'Page C',
+        uv: 2000,
+        pv: 9800,
+    },
+    {
+        name: 'Page D',
+        uv: 2780,
+        pv: 3908,
+    },
+    {
+        name: 'Page E',
+        uv: 1890,
+        pv: 4800,
+    },
+    {
+        name: 'Page F',
+        uv: 2390,
+        pv: 3800,
+    },
+    {
+        name: 'Page G',
+        uv: 3490,
+        pv: 4300,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>Stacked BarChart</label>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <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="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>
+                                </desc>
+                                <path fill="#a1daa3 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">pv</span>
+                        </li>
+                        <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
+                            <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>
+                                </desc>
+                                <path fill="#67abc5 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">uv</span>
+                        </li>
+                    </ul>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r19:">
+                        <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">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="161" x2="463" y2="161">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="109" x2="463" y2="109">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="57" x2="463" y2="57">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="5" x2="463" y2="5">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r1a:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts4-clip">
+                            <rect x="45" y="5" height="208" width="418">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r1d:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r1e:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r1f:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1b:">
+                            <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.599999999999994" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.599999999999994 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page B" x="120.71428571428572" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.71428571428572,188.768 h 26 v 24.232 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page C" x="180.42857142857144" y="43.13333333333334" width="26" height="169.86666666666667" radius="0" class="recharts-rectangle" d="M 180.42857142857144,43.13333333333334 h 26 v 169.86666666666667 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page D" x="240.14285714285714" y="145.26133333333334" width="26" height="67.73866666666666" radius="0" class="recharts-rectangle" d="M 240.14285714285714,145.26133333333334 h 26 v 67.73866666666666 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page E" x="299.8571428571429" y="129.8" width="26" height="83.19999999999999" radius="0" class="recharts-rectangle" d="M 299.8571428571429,129.8 h 26 v 83.19999999999999 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page F" x="359.57142857142856" y="147.13333333333335" width="26" height="65.86666666666665" radius="0" class="recharts-rectangle" d="M 359.57142857142856,147.13333333333335 h 26 v 65.86666666666665 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#a1daa3 " name="Page G" x="419.2857142857143" y="138.46666666666664" width="26" height="74.53333333333336" radius="0" class="recharts-rectangle" d="M 419.2857142857143,138.46666666666664 h 26 v 74.53333333333336 h -26 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1c:">
+                            <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.06666666666668" width="26" height="69.33333333333333" radius="0" class="recharts-rectangle" d="M 61,102.06666666666668 h 26 v 69.33333333333333 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page B" x="120.71428571428572" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.71428571428572,136.768 h 26 v 52 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page C" x="180.42857142857144" y="8.466666666666677" width="26" height="34.666666666666664" radius="0" class="recharts-rectangle" d="M 180.42857142857144,8.466666666666677 h 26 v 34.666666666666664 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page D" x="240.14285714285714" y="97.07466666666666" width="26" height="48.18666666666668" radius="0" class="recharts-rectangle" d="M 240.14285714285714,97.07466666666666 h 26 v 48.18666666666668 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page E" x="299.8571428571429" y="97.03999999999999" width="26" height="32.76000000000002" radius="0" class="recharts-rectangle" d="M 299.8571428571429,97.03999999999999 h 26 v 32.76000000000002 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page F" x="359.57142857142856" y="105.70666666666666" width="26" height="41.42666666666669" radius="0" class="recharts-rectangle" d="M 359.57142857142856,105.70666666666666 h 26 v 41.42666666666669 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="Page G" x="419.2857142857143" y="77.97333333333334" width="26" height="60.4933333333333" radius="0" class="recharts-rectangle" d="M 419.2857142857143,77.97333333333334 h 26 v 60.4933333333333 h -26 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r1g:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r1h:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74.85714285714286" y1="219" x2="74.85714285714286" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="134.57142857142858" y1="219" x2="134.57142857142858" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="194.2857142857143" y1="219" x2="194.2857142857143" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="254" y1="219" x2="254" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="313.7142857142857" y1="219" x2="313.7142857142857" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="373.4285714285714" y1="219" x2="373.4285714285714" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="433.1428571428571" y1="219" x2="433.1428571428571" y2="213">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="5" x2="45" y2="213">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="213" x2="45" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="161" x2="45" y2="161">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="109" x2="45" y2="109">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="57" x2="45" y2="57">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="5" x2="45" y2="5">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r1i:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:r1j:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:r1k:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:r1l:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:r1m:">
+                        <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">
+                                    <tspan x="74.85714285714286" dy="0.71em">Page A</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="134.57142857142858" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="134.57142857142858" dy="0.71em">Page B</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="194.2857142857143" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="194.2857142857143" dy="0.71em">Page C</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="254" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="254" dy="0.71em">Page D</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="313.7142857142857" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="313.7142857142857" dy="0.71em">Page E</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="373.4285714285714" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="373.4285714285714" dy="0.71em">Page F</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="433.1428571428571" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="433.1428571428571" dy="0.71em">Page G</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">0</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="161" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">3000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="109" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">6000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="57" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">9000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="10" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">12000</tspan>
+                                </text>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Basistarif
+
+Vertical BarChart
+
+Basistarif
+Diesel
+Maut
+Zuschläge
+
+015304560BasistarifDieselMautZuschläge
+
+#### Summary
+
+Vertical BarChart
+
+Basistarif
+Diesel
+Maut
+Zuschläge
+
+015304560BasistarifDieselMautZuschläge
+
+#### React (tsx)
+
+```tsx
+import BarChart from '@rio-cloud/rio-uikit/BarChart';
+import Bar from '@rio-cloud/rio-uikit/Bar';
+import Legend from '@rio-cloud/rio-uikit/Legend';
+
+type CustomData = {
+    label: string;
+    color: string;
+    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>
+        </>
+    );
+};
+
+const data: CustomData[] = [
+    {
+        label: 'Basistarif',
+        color: 'color-warmup-charm',
+        costs: 46.8,
+    },
+    {
+        label: 'Diesel',
+        color: 'color-warmup-salmon',
+        costs: 22.0,
+    },
+    {
+        label: 'Maut',
+        color: 'color-warmup-cherokee',
+        costs: 12.4,
+    },
+    {
+        label: 'Zuschläge',
+        color: 'brand-warning',
+        costs: 3.88,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>Vertical BarChart</label>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <div class="recharts-legend-wrapper" style="position: absolute; width: auto; height: auto; right: 5px; top: 5px;">
+                    <div class="">
+                        <div>
+                            <span class="display-inline-block margin-right-5 rounded-small" style="width: 12px; height: 12px; background: rgb(201, 119, 141);">
+                            </span>
+                            <span class="text-color-dark">Basistarif</span>
+                        </div>
+                        <div>
+                            <span class="display-inline-block margin-right-5 rounded-small" style="width: 12px; height: 12px; background: rgb(241, 149, 136);">
+                            </span>
+                            <span class="text-color-dark">Diesel</span>
+                        </div>
+                        <div>
+                            <span class="display-inline-block margin-right-5 rounded-small" style="width: 12px; height: 12px; background: rgb(245, 187, 137);">
+                            </span>
+                            <span class="text-color-dark">Maut</span>
+                        </div>
+                        <div>
+                            <span class="display-inline-block margin-right-5 rounded-small" style="width: 12px; height: 12px; background: rgb(255, 142, 60);">
+                            </span>
+                            <span class="text-color-dark">Zuschläge</span>
+                        </div>
+                    </div>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r1n:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r1o:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts5-clip">
+                            <rect x="15" y="5" height="244" width="371.859375">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r1q:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r1r:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r1s:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1p:">
+                            <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.05031249999996" height="48" radius="0" class="recharts-rectangle" d="M 15,11.1 h 290.05031249999996 v 48 h -290.05031249999996 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#f19588 " name="undefined" color="color-warmup-salmon" x="15" y="72.1" width="136.3484375" height="48" radius="0" class="recharts-rectangle" d="M 15,72.1 h 136.3484375 v 48 h -136.3484375 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#f5bb89 " name="undefined" color="color-warmup-cherokee" x="15" y="133.1" width="76.8509375" height="48" radius="0" class="recharts-rectangle" d="M 15,133.1 h 76.8509375 v 48 h -76.8509375 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#ff8e3c " name="undefined" color="brand-warning" x="15" y="194.1" width="24.04690625" height="48" radius="0" class="recharts-rectangle" d="M 15,194.1 h 24.04690625 v 48 h -24.04690625 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r1t:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r1u:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="15" y1="255" x2="15" y2="249">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="107.96484375" y1="255" x2="107.96484375" y2="249">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="200.9296875" y1="255" x2="200.9296875" y2="249">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="293.89453125" y1="255" x2="293.89453125" y2="249">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="386.859375" y1="255" x2="386.859375" y2="249">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r1v:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:r20:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:r21:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:r22:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:r23:">
+                        <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">
+                                    <tspan x="15" dy="0.71em">0</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="14" orientation="bottom" width="371.859375" stroke="none" x="107.96484375" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="107.96484375" dy="0.71em">15</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="14" orientation="bottom" width="371.859375" stroke="none" x="200.9296875" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="200.9296875" dy="0.71em">30</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="14" orientation="bottom" width="371.859375" stroke="none" x="293.89453125" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="293.89453125" dy="0.71em">45</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="14" orientation="bottom" width="371.859375" stroke="none" x="386.859375" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="386.859375" dy="0.71em">60</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="10" orientation="left" height="244" stroke="none" x="-191" y="35.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="-191" dy="0.355em">Basistarif</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="10" orientation="left" height="244" stroke="none" x="-191" y="96.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="-191" dy="0.355em">Diesel</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="10" orientation="left" height="244" stroke="none" x="-191" y="157.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="-191" dy="0.355em">Maut</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="10" orientation="left" height="244" stroke="none" x="-191" y="218.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="-191" dy="0.355em">Zuschläge</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-label-list">
+                            <text width="157.94968750000004" height="48" offset="5" x="310.05031249999996" y="35.1" class="recharts-text recharts-label" text-anchor="start" fill="#c9778d ">
+                                <tspan x="310.05031249999996" dy="0.355em">46.8€</tspan>
+                            </text>
+                            <text width="311.6515625" height="48" offset="5" x="156.3484375" y="96.1" class="recharts-text recharts-label" text-anchor="start" fill="#f19588 ">
+                                <tspan x="156.3484375" dy="0.355em">22€</tspan>
+                            </text>
+                            <text width="371.1490625" height="48" offset="5" x="96.8509375" y="157.1" class="recharts-text recharts-label" text-anchor="start" fill="#f5bb89 ">
+                                <tspan x="96.8509375" dy="0.355em">12.4€</tspan>
+                            </text>
+                            <text width="423.95309375" height="48" offset="5" x="44.04690625" y="218.1" class="recharts-text recharts-label" text-anchor="start" fill="#ff8e3c ">
+                                <tspan x="44.04690625" dy="0.355em">3.88€</tspan>
+                            </text>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 6
+
+BarChart with custom Tooltips
+pv
+uv
+
+Truck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000
+
+#### Summary
+
+BarChart with custom Tooltips
+pv
+uv
+
+Truck ATruck BTruck CTruck DTruck ETruck FTruck G030006000900012000
+
+#### React (tsx)
+
+```tsx
+import BarChart from '@rio-cloud/rio-uikit/BarChart';
+import Bar from '@rio-cloud/rio-uikit/Bar';
+import Legend from '@rio-cloud/rio-uikit/Legend';
+import ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';
+
+// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: any }) => {
+    if (!active) {
+        return null;
+    }
+
+    const firstValue = payload[0].value;
+    const secondValue = payload[1].value;
+    const totalValue = firstValue + secondValue;
+
+    return (
+        <div className='custom-tooltip bg-white border padding-10 min-width-100 rounded shadow-smooth'>
+            <div className='display-flex justify-content-between gap-20'>
+                <span className='text-color-dark'>20.06.2022</span>
+                <span className='display-flex align-items-center text-color-darker line-height-12'>
+                    <span className='rioglyph rioglyph-truck' />
+                    <span className='margin-left-2'>{payload.length}</span>
+                </span>
+            </div>
+            <hr className='margin-y-5' />
+            <div>
+                <div className='display-flex'>
+                    <span className='width-10' />
+                    <span className='text-color-highlight-dark'>{`${firstValue} km`}</span>
+                </div>
+                <div className='display-flex'>
+                    <span className='width-10 text-center text-color-highlight'>+</span>
+                    <span className='text-color-highlight'>{`${secondValue} km`}</span>
+                </div>
+                <div className='display-flex border border-top-only border-color-lightest'>
+                    <span className='width-10 text-center text-color-highlight-darkest'>=</span>
+                    <span className='text-color-highlight-darkest'>{`${totalValue} km`}</span>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default () => (
+    <>
+        <label>BarChart with custom Tooltips</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-highlight-dark' />,
+                    <Bar key='uv' dataKey='uv' stackId='a' barSize={26} color='color-highlight' />,
+                ]}
+                tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}
+            />
+        </div>
+    </>
+);
+
+const data = [
+    {
+        name: 'Truck A',
+        uv: 4000,
+        pv: 2400,
+    },
+    {
+        name: 'Truck B',
+        uv: 3000,
+        pv: 1398,
+    },
+    {
+        name: 'Truck C',
+        uv: 2000,
+        pv: 9800,
+    },
+    {
+        name: 'Truck D',
+        uv: 2780,
+        pv: 3908,
+    },
+    {
+        name: 'Truck E',
+        uv: 1890,
+        pv: 4800,
+    },
+    {
+        name: 'Truck F',
+        uv: 2390,
+        pv: 3800,
+    },
+    {
+        name: 'Truck G',
+        uv: 3490,
+        pv: 4300,
+    },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>BarChart with custom Tooltips</label>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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>
+                <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="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>
+                                </desc>
+                                <path fill="#268897 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(38, 136, 151);">pv</span>
+                        </li>
+                        <li class="recharts-legend-item legend-item-1" style="display: inline-block; margin-right: 10px;">
+                            <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>
+                                </desc>
+                                <path fill="#30b4c0 " cx="16" cy="16" class="recharts-symbols" transform="translate(16, 16)" d="M16,0A16,16,0,1,1,-16,0A16,16,0,1,1,16,0">
+                                </path>
+                            </svg>
+                            <span class="recharts-legend-item-text" style="color: rgb(48, 180, 192);">uv</span>
+                        </li>
+                    </ul>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r24:">
+                        <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">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="161" x2="463" y2="161">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="109" x2="463" y2="109">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="57" x2="463" y2="57">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="5" x2="463" y2="5">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r25:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts6-clip">
+                            <rect x="45" y="5" height="208" width="418">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r28:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r29:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r2a:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r26:">
+                            <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.599999999999994" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.599999999999994 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck B" x="120.71428571428572" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.71428571428572,188.768 h 26 v 24.232 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck C" x="180.42857142857144" y="43.13333333333334" width="26" height="169.86666666666667" radius="0" class="recharts-rectangle" d="M 180.42857142857144,43.13333333333334 h 26 v 169.86666666666667 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck D" x="240.14285714285714" y="145.26133333333334" width="26" height="67.73866666666666" radius="0" class="recharts-rectangle" d="M 240.14285714285714,145.26133333333334 h 26 v 67.73866666666666 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck E" x="299.8571428571429" y="129.8" width="26" height="83.19999999999999" radius="0" class="recharts-rectangle" d="M 299.8571428571429,129.8 h 26 v 83.19999999999999 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck F" x="359.57142857142856" y="147.13333333333335" width="26" height="65.86666666666665" radius="0" class="recharts-rectangle" d="M 359.57142857142856,147.13333333333335 h 26 v 65.86666666666665 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#268897 " name="Truck G" x="419.2857142857143" y="138.46666666666664" width="26" height="74.53333333333336" radius="0" class="recharts-rectangle" d="M 419.2857142857143,138.46666666666664 h 26 v 74.53333333333336 h -26 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r27:">
+                            <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.06666666666668" width="26" height="69.33333333333333" radius="0" class="recharts-rectangle" d="M 61,102.06666666666668 h 26 v 69.33333333333333 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck B" x="120.71428571428572" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.71428571428572,136.768 h 26 v 52 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck C" x="180.42857142857144" y="8.466666666666677" width="26" height="34.666666666666664" radius="0" class="recharts-rectangle" d="M 180.42857142857144,8.466666666666677 h 26 v 34.666666666666664 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck D" x="240.14285714285714" y="97.07466666666666" width="26" height="48.18666666666668" radius="0" class="recharts-rectangle" d="M 240.14285714285714,97.07466666666666 h 26 v 48.18666666666668 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck E" x="299.8571428571429" y="97.03999999999999" width="26" height="32.76000000000002" radius="0" class="recharts-rectangle" d="M 299.8571428571429,97.03999999999999 h 26 v 32.76000000000002 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck F" x="359.57142857142856" y="105.70666666666666" width="26" height="41.42666666666669" radius="0" class="recharts-rectangle" d="M 359.57142857142856,105.70666666666666 h 26 v 41.42666666666669 h -26 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#30b4c0 " name="Truck G" x="419.2857142857143" y="77.97333333333334" width="26" height="60.4933333333333" radius="0" class="recharts-rectangle" d="M 419.2857142857143,77.97333333333334 h 26 v 60.4933333333333 h -26 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r2b:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r2c:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="74.85714285714286" y1="219" x2="74.85714285714286" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="134.57142857142858" y1="219" x2="134.57142857142858" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="194.2857142857143" y1="219" x2="194.2857142857143" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="254" y1="219" x2="254" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="313.7142857142857" y1="219" x2="313.7142857142857" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="373.4285714285714" y1="219" x2="373.4285714285714" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="433.1428571428571" y1="219" x2="433.1428571428571" y2="213">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="5" x2="45" y2="213">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="213" x2="45" y2="213">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="161" x2="45" y2="161">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="109" x2="45" y2="109">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="57" x2="45" y2="57">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line width="40" angle="0" orientation="left" x="5" y="5" height="208" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="39" y1="5" x2="45" y2="5">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r2d:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:r2e:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:r2f:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:r2g:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:r2h:">
+                        <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">
+                                    <tspan x="74.85714285714286" dy="0.71em">Truck A</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="134.57142857142858" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="134.57142857142858" dy="0.71em">Truck B</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="194.2857142857143" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="194.2857142857143" dy="0.71em">Truck C</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="254" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="254" dy="0.71em">Truck D</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="313.7142857142857" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="313.7142857142857" dy="0.71em">Truck E</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="373.4285714285714" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="373.4285714285714" dy="0.71em">Truck F</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="418" stroke="none" x="433.1428571428571" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="433.1428571428571" dy="0.71em">Truck G</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="213" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">0</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="161" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">3000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="109" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">6000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="57" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">9000</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text width="40" orientation="left" height="208" stroke="none" x="37" y="10" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="37" dy="0.355em">12000</tspan>
+                                </text>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |
+
+### Example: Example 7
+
+Multiple axis BarChart
+
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2
+
+#### Summary
+
+Multiple axis BarChart
+
+JanuaryFebruaryMarchAprilMayJuneTimerange0 €15 €30 €45 €60 €CostsQ1Q1Q1Q2Q2Q2
+
+#### React (tsx)
+
+```tsx
+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>
+        </>
+    );
+};
+
+const data = [
+    { label: 'January', costs: 46.8, quarter: 'Q1' },
+    { label: 'February', costs: 22.0, quarter: 'Q1' },
+    { label: 'March', costs: 12.4, quarter: 'Q1' },
+    { label: 'April', costs: 3.88, quarter: 'Q2' },
+    { label: 'May', costs: 3.23, quarter: 'Q2' },
+    { label: 'June', costs: 4.67, quarter: 'Q2' },
+];
+```
+
+#### HTML (html)
+
+```html
+<label>Multiple axis BarChart</label>
+<div class="panel panel-default panel-body margin-bottom-0 height-300 max-width-500">
+    <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 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>
+                    </div>
+                </div>
+                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="268" viewBox="0 0 468 268" style="width: 100%; height: 100%; display: block;">
+                    <title>
+                    </title>
+                    <desc>
+                    </desc>
+                    <g tabindex="-1" id="recharts-zindex--100-:r2i:">
+                        <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">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="144.75" x2="468" y2="144.75">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="96.5" x2="468" y2="96.5">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="48.25" x2="468" y2="48.25">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="0" x2="468" y2="0">
+                                </line>
+                            </g>
+                            <g class="recharts-cartesian-grid-vertical">
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="94" y1="0" x2="94" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="162" y1="0" x2="162" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="230" y1="0" x2="230" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="298" y1="0" x2="298" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="366" y1="0" x2="366" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="434" y1="0" x2="434" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="0" x2="60" y2="193">
+                                </line>
+                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="468" y1="0" x2="468" y2="193">
+                                </line>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex--50-:r2j:">
+                    </g>
+                    <defs>
+                        <clipPath id="recharts7-clip">
+                            <rect x="60" y="0" height="193" width="408">
+                            </rect>
+                        </clipPath>
+                    </defs>
+                    <g tabindex="-1" id="recharts-zindex-100-:r2l:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-200-:r2m:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-300-:r2n:">
+                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2k:">
+                            <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.460000000000015" width="54" height="150.54" radius="0" class="recharts-rectangle" d="M 66.8,42.460000000000015 h 54 v 150.54 h -54 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="134.8" y="122.23333333333333" width="54" height="70.76666666666667" radius="0" class="recharts-rectangle" d="M 134.8,122.23333333333333 h 54 v 70.76666666666667 h -54 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="202.8" y="153.11333333333334" width="54" height="39.886666666666656" radius="0" class="recharts-rectangle" d="M 202.8,153.11333333333334 h 54 v 39.886666666666656 h -54 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="270.8" y="180.51933333333335" width="54" height="12.48066666666665" radius="0" class="recharts-rectangle" d="M 270.8,180.51933333333335 h 54 v 12.48066666666665 h -54 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="338.8" y="182.6101666666667" width="54" height="10.389833333333314" radius="0" class="recharts-rectangle" d="M 338.8,182.6101666666667 h 54 v 10.389833333333314 h -54 Z">
+                                        </path>
+                                    </g>
+                                    <g class="recharts-layer recharts-bar-rectangle">
+                                        <path fill="#67abc5 " name="undefined" x="406.8" y="177.97816666666668" width="54" height="15.02183333333332" radius="0" class="recharts-rectangle" d="M 406.8,177.97816666666668 h 54 v 15.02183333333332 h -54 Z">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-400-:r2o:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-500-:r2p:">
+                        <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>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="94" y1="199" x2="94" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="162" y1="199" x2="162" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="230" y1="199" x2="230" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="298" y1="199" x2="298" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="366" y1="199" x2="366" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="434" y1="199" x2="434" y2="193">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
+                            <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="0" x2="60" y2="193">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-yAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-yAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="193" x2="60" y2="193">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="144.75" x2="60" y2="144.75">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="96.5" x2="60" y2="96.5">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="48.25" x2="60" y2="48.25">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line angle="0" orientation="left" width="60" x="0" y="0" height="193" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="54" y1="0" x2="60" y2="0">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
+                            <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="223" x2="468" y2="223">
+                            </line>
+                            <g class="recharts-cartesian-axis-ticks recharts-xAxis-ticks">
+                                <g class="recharts-cartesian-axis-tick-lines recharts-xAxis-tick-lines">
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="94" y1="229" x2="94" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="162" y1="229" x2="162" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="230" y1="229" x2="230" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="298" y1="229" x2="298" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="366" y1="229" x2="366" y2="223">
+                                        </line>
+                                    </g>
+                                    <g class="recharts-layer recharts-cartesian-axis-tick">
+                                        <line orientation="bottom" angle="0" height="30" x="60" y="223" width="408" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="434" y1="229" x2="434" y2="223">
+                                        </line>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-600-:r2q:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1000-:r2r:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1100-:r2s:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-1200-:r2t:">
+                    </g>
+                    <g tabindex="-1" id="recharts-zindex-2000-:r2u:">
+                        <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">
+                                    <tspan x="94" dy="0.71em">January</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="162" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="162" dy="0.71em">February</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="230" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="230" dy="0.71em">March</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="298" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="298" dy="0.71em">April</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="366" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="366" dy="0.71em">May</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text height="30" orientation="bottom" width="408" stroke="none" x="434" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="434" dy="0.71em">June</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <text offset="30" x="264" y="253" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
+                            <tspan x="264" dy="0.71em">Timerange</tspan>
+                        </text>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-yAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="193" stroke="none" x="52" y="193" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">0 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="193" stroke="none" x="52" y="144.75" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">15 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="193" stroke="none" x="52" y="96.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">30 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="193" stroke="none" x="52" y="48.25" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">45 €</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="left" width="60" height="193" stroke="none" x="52" y="10" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
+                                    <tspan x="52" dy="0.355em">60 €</tspan>
+                                </text>
+                            </g>
+                        </g>
+                        <text offset="5" transform="rotate(-90, 5, 96.5)" x="5" y="96.5" class="recharts-text recharts-label" text-anchor="start" fill="#808080">
+                            <tspan x="5" dy="0.355em">Costs</tspan>
+                        </text>
+                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="94" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="94" dy="0.71em">Q1</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="162" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="162" dy="0.71em">Q1</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="230" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="230" dy="0.71em">Q1</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="298" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="298" dy="0.71em">Q2</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="366" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="366" dy="0.71em">Q2</tspan>
+                                </text>
+                            </g>
+                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
+                                <text orientation="bottom" height="30" width="408" stroke="none" x="434" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
+                                    <tspan x="434" dy="0.71em">Q2</tspan>
+                                </text>
+                            </g>
+                        </g>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
+```
+
+#### Props: BarChart
+
+### BarChart
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| width | Number | — | The width of chart container. |
+| height | Number | — | The height of chart container. |
+| data | Array | — | The source data, in which each element is an object. It has the following format: [{ name: "a", value: 12 }] Note: for some charts, the color of the individual data is taken from the color prop: [{ name: "a", value: 12, color: "color-coldplay-fountain" }] |
+| dataKey | String \| Number \| Function | value | The key of data displayed in the axis. Also, used as label for the x-axis. |
+| dataUnit | string | — | The unit of data displayed in the chart. |
+| layout | String | horizontal | The layout of the chart. Possible values are: horizontal, vertical |
+| showGrid | Boolean | false | Defines whether or not the grid shall be rendered. |
+| showXAxis | Boolean | true | Defines whether or not the x-axis shall be rendered. |
+| showYAxis | Boolean | true | Defines whether or not the y-axis shall be rendered. |
+| xAxisOptions | Object | — | Detailed options passed to the underlying XAxis component. Details can be found here: https://recharts.org/en-US/api/XAxis |
+| yAxisOptions | Object | — | Detailed options passed to the underlying YAxis component. Details can be found here: https://recharts.org/en-US/api/YAxis |
+| additionalAxes | React.ReactElement<XAxisProps \| YAxisProps>[] | — | Render a list of additional axes. This includes YAxis and XAxis. |
+| gridOptions | Object | — | Detailed options passed to the underlying Grid component. Details can be found here: https://recharts.org/en-US/api/CartesianGrid |
+| useDataColors | Boolean | false | Defines whether or not the color information shall be taken from the data input to use different colors for different entries. |
+| brush | Boolean | false | Defines whether or not the brush component shall be used. |
+| tooltip | ChartTooltip \| Boolean | — | Defines whether or not the tooltip component shall be used. You can customize the tooltip by providing a custom ChartTooltip. Prop details can be found here: https://recharts.org/en-US/api/Tooltip. You can also customize the cursor color by setting a stroke or fill color in the cursor props. Details can be found here: https://recharts.org/en-US/api/Tooltip#cursor |
+| legend | Legend \| Boolean | false | Shows the provided Legend component otherwise shows nothing. |
+| bars | Array of Bar | [] | Renders the provided Bar components. |
+| ... |  | — | Additional props are passed to the underlying BarChart component. Details can be found here: https://recharts.org/en-US/api/BarChart |
+
+#### Props: Bar
+
+### Bar
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| color | String | color-coldplay-fountain | Defines the color for the whole bar component instead of individual colors from the data. Take the color name from the charts colors page. |
+| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the bar. |
+| dataUnit | String \| Number | — | The unit of data displayed for the bar. |
+| ... |  | — | Additional props are passed to the underlying Bar component. Details can be found here: https://recharts.org/en-US/api/Bar |
+
+#### Props: Legend
+
+### Legend
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| iconType | String | square | Defines the type of the leading icon. |
+| iconSize | String | 12 | Defines the size of the leading icon. |
+| layout | String | vertical | Defines the layout of the legend. |
+| align | String | right | Defines the alignment of the legend relative to the chart. |
+| verticalAlign | String | top | Defines the vertical alignment of the legend relative to the chart. |
+| ... |  | — | Additional props are passed to the underlying legend component. Details can be found here: https://recharts.org/en-US/api/Legend |