# BarChart

*Category:* Components
*Section:* Charts
*Source:* https://uikit.developers.rio.cloud/#/components/barCharts
*Captured:* 2026-04-27T14:59:18.361Z

## 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

January February March April May June

#### 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 () => (
    <>
        <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" class="recharts-zIndex-layer_-100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts1-clip">
                            <rect x="0" y="0" height="223" width="468">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r0:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="7.8" y="60.3548" width="62" height="162.6452" class="recharts-rectangle" d="M7.8,63.3548A 3,3,0,0,1,10.8,60.3548L 66.8,60.3548A 3,3,0,0,1,
        69.8,63.3548L 69.8,223L 7.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="85.8" y="146.5429" width="62" height="76.4571" class="recharts-rectangle" d="M85.8,149.5429A 3,3,0,0,1,88.8,146.5429L 144.8,146.5429A 3,3,0,0,1,
        147.8,149.5429L 147.8,223L 85.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="163.8" y="179.906" width="62" height="43.094" class="recharts-rectangle" d="M163.8,182.906A 3,3,0,0,1,166.8,179.906L 222.8,179.906A 3,3,0,0,1,
        225.8,182.906L 225.8,223L 163.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="241.8" y="209.5157" width="62" height="13.4843" class="recharts-rectangle" d="M241.8,212.5157A 3,3,0,0,1,244.8,209.5157L 300.8,209.5157A 3,3,0,0,1,
        303.8,212.5157L 303.8,223L 241.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="319.8" y="211.7747" width="62" height="11.2253" class="recharts-rectangle" d="M319.8,214.7747A 3,3,0,0,1,322.8,211.7747L 378.8,211.7747A 3,3,0,0,1,
        381.8,214.7747L 381.8,223L 319.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="undefined" x="397.8" y="206.7702" width="62" height="16.2298" class="recharts-rectangle" d="M397.8,209.7702A 3,3,0,0,1,400.8,206.7702L 456.8,206.7702A 3,3,0,0,1,
        459.8,209.7702L 459.8,223L 397.8,223Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="0" y="223" width="468" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="0" y1="223" x2="468" y2="223">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="468" stroke="none" x="39" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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>
                </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

January February March April May June Timerange 0 € 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 () => (
    <>
        <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" class="recharts-zIndex-layer_-100">
                        <g class="recharts-cartesian-grid">
                            <g class="recharts-cartesian-grid-horizontal">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="223" x1="60" y1="223" x2="468" y2="223">
                                </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" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts2-clip">
                            <rect x="60" y="0" height="223" width="408">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="84" y="49.06" width="20" height="173.94" class="recharts-rectangle" d="M84,52.06A 3,3,0,0,1,87,49.06L 101,49.06A 3,3,0,0,1,
        104,52.06L 104,223L 84,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="152" y="141.2333" width="20" height="81.7667" class="recharts-rectangle" d="M152,144.2333A 3,3,0,0,1,155,141.2333L 169,141.2333A 3,3,0,0,1,
        172,144.2333L 172,223L 152,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="220" y="176.9133" width="20" height="46.0867" class="recharts-rectangle" d="M220,179.9133A 3,3,0,0,1,223,176.9133L 237,176.9133A 3,3,0,0,1,
        240,179.9133L 240,223L 220,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="288" y="208.5793" width="20" height="14.4207" class="recharts-rectangle" d="M288,211.5793A 3,3,0,0,1,291,208.5793L 305,208.5793A 3,3,0,0,1,
        308,211.5793L 308,223L 288,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="356" y="210.9952" width="20" height="12.0048" class="recharts-rectangle" d="M356,213.9952A 3,3,0,0,1,359,210.9952L 373,210.9952A 3,3,0,0,1,
        376,213.9952L 376,223L 356,223Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="424" y="205.6432" width="20" height="17.3568" class="recharts-rectangle" d="M424,208.6432A 3,3,0,0,1,427,205.6432L 441,205.6432A 3,3,0,0,1,
        444,208.6432L 444,223L 424,223Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="60" y="223" width="408" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="223" x2="468" y2="223">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="408" stroke="none" x="94" y="231" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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 A Page B Page C Page D Page E Page F Page G 0 2500 5000 7500 10000

#### 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 () => (
    <>
        <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="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);">
                                <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="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="#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" class="recharts-zIndex-layer_-100">
                        <g class="recharts-cartesian-grid">
                            <g class="recharts-cartesian-grid-horizontal">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
                                </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" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts3-clip">
                            <rect x="45" y="5" height="208" width="418">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r2:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page A" x="50.9714" y="163.08" width="21" height="49.92" radius="0" class="recharts-rectangle" d="M 50.9714,163.08 h 21 v 49.92 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page B" x="110.6857" y="183.9216" width="21" height="29.0784" radius="0" class="recharts-rectangle" d="M 110.6857,183.9216 h 21 v 29.0784 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page C" x="170.4" y="9.16" width="21" height="203.84" radius="0" class="recharts-rectangle" d="M 170.4,9.16 h 21 v 203.84 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page D" x="230.1143" y="131.7136" width="21" height="81.2864" radius="0" class="recharts-rectangle" d="M 230.1143,131.7136 h 21 v 81.2864 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page E" x="289.8286" y="113.16" width="21" height="99.84" radius="0" class="recharts-rectangle" d="M 289.8286,113.16 h 21 v 99.84 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page F" x="349.5429" y="133.96" width="21" height="79.04" radius="0" class="recharts-rectangle" d="M 349.5429,133.96 h 21 v 79.04 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page G" x="409.2571" y="123.56" width="21" height="89.44" radius="0" class="recharts-rectangle" d="M 409.2571,123.56 h 21 v 89.44 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <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">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page A" x="75.9714" y="129.8" width="21" height="83.2" radius="0" class="recharts-rectangle" d="M 75.9714,129.8 h 21 v 83.2 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page B" x="135.6857" y="150.6" width="21" height="62.4" radius="0" class="recharts-rectangle" d="M 135.6857,150.6 h 21 v 62.4 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page C" x="195.4" y="171.4" width="21" height="41.6" radius="0" class="recharts-rectangle" d="M 195.4,171.4 h 21 v 41.6 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page D" x="255.1143" y="155.176" width="21" height="57.824" radius="0" class="recharts-rectangle" d="M 255.1143,155.176 h 21 v 57.824 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page E" x="314.8286" y="173.688" width="21" height="39.312" radius="0" class="recharts-rectangle" d="M 314.8286,173.688 h 21 v 39.312 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page F" x="374.5429" y="163.288" width="21" height="49.712" radius="0" class="recharts-rectangle" d="M 374.5429,163.288 h 21 v 49.712 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#31144f " name="Page G" x="434.2571" y="140.408" width="21" height="72.592" radius="0" class="recharts-rectangle" d="M 434.2571,140.408 h 21 v 72.592 h -21 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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 A Page B Page C Page D Page E Page F Page G 0 3000 6000 9000 12000

#### 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 () => (
    <>
        <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" class="recharts-zIndex-layer_-100">
                        <g class="recharts-cartesian-grid">
                            <g class="recharts-cartesian-grid-horizontal">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
                                </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" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts4-clip">
                            <rect x="45" y="5" height="208" width="418">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r4:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#a1daa3 " name="Page G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r5:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="Page G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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

0 15 30 45 60 Basistarif Diesel Maut Zuschlä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 () => (
    <>
        <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" class="recharts-zIndex-layer_-100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts5-clip">
                            <rect x="15" y="5" height="244" width="371.859375">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r6:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#c9778d " name="undefined" color="color-warmup-charm" x="15" y="11.1" width="290.0503" height="48" radius="0" class="recharts-rectangle" d="M 15,11.1 h 290.0503 v 48 h -290.0503 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#f19588 " name="undefined" color="color-warmup-salmon" x="15" y="72.1" width="136.3484" height="48" radius="0" class="recharts-rectangle" d="M 15,72.1 h 136.3484 v 48 h -136.3484 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#f5bb89 " name="undefined" color="color-warmup-cherokee" x="15" y="133.1" width="76.8509" height="48" radius="0" class="recharts-rectangle" d="M 15,133.1 h 76.8509 v 48 h -76.8509 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#ff8e3c " name="undefined" color="brand-warning" x="15" y="194.1" width="24.0469" height="48" radius="0" class="recharts-rectangle" d="M 15,194.1 h 24.0469 v 48 h -24.0469 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line height="14" angle="0" orientation="bottom" x="15" y="249" width="371.859375" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="249" x2="386.859375" y2="249">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="14" orientation="bottom" width="371.859375" stroke="none" x="15" y="257" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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 A Truck B Truck C Truck D Truck E Truck F Truck G 0 3000 6000 9000 12000

#### 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: injected payload data
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" class="recharts-zIndex-layer_-100">
                        <g class="recharts-cartesian-grid">
                            <g class="recharts-cartesian-grid-horizontal">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="45" y="5" width="418" height="208" x1="45" y1="213" x2="463" y2="213">
                                </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" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts6-clip">
                            <rect x="45" y="5" height="208" width="418">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r7:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck A" x="61" y="171.4" width="26" height="41.6" radius="0" class="recharts-rectangle" d="M 61,171.4 h 26 v 41.6 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck B" x="120.7143" y="188.768" width="26" height="24.232" radius="0" class="recharts-rectangle" d="M 120.7143,188.768 h 26 v 24.232 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck C" x="180.4286" y="43.1333" width="26" height="169.8667" radius="0" class="recharts-rectangle" d="M 180.4286,43.1333 h 26 v 169.8667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck D" x="240.1429" y="145.2613" width="26" height="67.7387" radius="0" class="recharts-rectangle" d="M 240.1429,145.2613 h 26 v 67.7387 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck E" x="299.8571" y="129.8" width="26" height="83.2" radius="0" class="recharts-rectangle" d="M 299.8571,129.8 h 26 v 83.2 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck F" x="359.5714" y="147.1333" width="26" height="65.8667" radius="0" class="recharts-rectangle" d="M 359.5714,147.1333 h 26 v 65.8667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#268897 " name="Truck G" x="419.2857" y="138.4667" width="26" height="74.5333" radius="0" class="recharts-rectangle" d="M 419.2857,138.4667 h 26 v 74.5333 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r8:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck A" x="61" y="102.0667" width="26" height="69.3333" radius="0" class="recharts-rectangle" d="M 61,102.0667 h 26 v 69.3333 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck B" x="120.7143" y="136.768" width="26" height="52" radius="0" class="recharts-rectangle" d="M 120.7143,136.768 h 26 v 52 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck C" x="180.4286" y="8.4667" width="26" height="34.6667" radius="0" class="recharts-rectangle" d="M 180.4286,8.4667 h 26 v 34.6667 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck D" x="240.1429" y="97.0747" width="26" height="48.1867" radius="0" class="recharts-rectangle" d="M 240.1429,97.0747 h 26 v 48.1867 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck E" x="299.8571" y="97.04" width="26" height="32.76" radius="0" class="recharts-rectangle" d="M 299.8571,97.04 h 26 v 32.76 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck F" x="359.5714" y="105.7067" width="26" height="41.4267" radius="0" class="recharts-rectangle" d="M 359.5714,105.7067 h 26 v 41.4267 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#30b4c0 " name="Truck G" x="419.2857" y="77.9733" width="26" height="60.4933" radius="0" class="recharts-rectangle" d="M 419.2857,77.9733 h 26 v 60.4933 h -26 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="45" y="213" width="418" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="45" y1="213" x2="463" y2="213">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="418" stroke="none" x="74.85714285714286" y="221" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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

January February March April May June Timerange 0 € 15 € 30 € 45 € 60 € Costs Q1 Q1 Q1 Q2 Q2 Q2

#### 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 () => (
    <>
        <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" class="recharts-zIndex-layer_-100">
                        <g class="recharts-cartesian-grid">
                            <g class="recharts-cartesian-grid-horizontal">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="60" y="0" width="408" height="193" x1="60" y1="193" x2="468" y2="193">
                                </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" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts7-clip">
                            <rect x="60" y="0" height="193" width="408">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r9:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="66.8" y="42.46" width="54" height="150.54" radius="0" class="recharts-rectangle" d="M 66.8,42.46 h 54 v 150.54 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="134.8" y="122.2333" width="54" height="70.7667" radius="0" class="recharts-rectangle" d="M 134.8,122.2333 h 54 v 70.7667 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="202.8" y="153.1133" width="54" height="39.8867" radius="0" class="recharts-rectangle" d="M 202.8,153.1133 h 54 v 39.8867 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="270.8" y="180.5193" width="54" height="12.4807" radius="0" class="recharts-rectangle" d="M 270.8,180.5193 h 54 v 12.4807 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="338.8" y="182.6102" width="54" height="10.3898" radius="0" class="recharts-rectangle" d="M 338.8,182.6102 h 54 v 10.3898 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill="#67abc5 " name="undefined" x="406.8" y="177.9782" width="54" height="15.0218" radius="0" class="recharts-rectangle" d="M 406.8,177.9782 h 54 v 15.0218 h -54 Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_500">
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="60" y="193" width="408" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="60" y1="193" x2="468" y2="193">
                            </line>
                            <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" class="recharts-zIndex-layer_600">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1000">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1100">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_1200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_2000">
                        <g class="recharts-cartesian-axis-tick-labels recharts-xAxis-tick-labels">
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="408" stroke="none" x="94" y="201" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <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 |