# LineChart

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

## LineChart

> 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: Example 1

Simple LineChart

Page A Page B Page C Page D Page E Page F Page G

#### React (tsx)

```tsx
import LineChart from '@rio-cloud/rio-uikit/LineChart';
import Line from '@rio-cloud/rio-uikit/Line';

type CustomData = {
    name: string;
    value: number;
};

export default () => (
    <>
        <label>Simple LineChart</label>
        <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
            <LineChart
                data={data}
                dataKey={(entry: CustomData) => entry.name}
                xAxisOptions={{ padding: { left: 30, right: 30 } }}
                showGrid
                gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
                lines={[<Line key='line' dataKey={entry => entry.value} />]}
            />
        </div>
    </>
);

const data: CustomData[] = [
    {
        name: 'Page A',
        value: 3200,
    },
    {
        name: 'Page B',
        value: 3000,
    },
    {
        name: 'Page C',
        value: 2000,
    },
    {
        name: 'Page D',
        value: 2780,
    },
    {
        name: 'Page E',
        value: 1890,
    },
    {
        name: 'Page F',
        value: 2390,
    },
    {
        name: 'Page G',
        value: 3490,
    },
];
```

#### HTML (html)

```html
<label>Simple LineChart</label>
<div class="panel panel-default panel-body margin-bottom-0 height-200 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="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 468px; height: 168px;">
                <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="168" viewBox="0 0 468 168" 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="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="123" x2="453" y2="123">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="96" x2="453" y2="96">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="69" x2="453" y2="69">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="42" x2="453" y2="42">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="438" height="108" x1="15" y1="15" x2="453" y2="15">
                                </line>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts1-clip">
                            <rect x="15" y="15" height="108" width="438">
                            </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>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r0:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="11.3402px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
                                </path>
                            </g>
                        </g>
                    </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="15" y="123" width="438" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="453" y2="123">
                            </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="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="45" y1="129" x2="45" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="108" y1="129" x2="108" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="171" y1="129" x2="171" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="234" y1="129" x2="234" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="297" y1="129" x2="297" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="360" y1="129" x2="360" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="423" y1="129" x2="423" y2="123">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="45" cy="27.000000000000007" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="108" cy="33" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="171" cy="63" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="234" cy="39.599999999999994" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="297" cy="66.3" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="360" cy="51.3" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="423" cy="18.3" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                    </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="438" stroke="none" x="45" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="45" dy="0.71em">Page A</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="108" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="108" dy="0.71em">Page B</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="171" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="171" dy="0.71em">Page C</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="234" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="234" dy="0.71em">Page D</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="297" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="297" dy="0.71em">Page E</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="360" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="360" dy="0.71em">Page F</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="423" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="423" dy="0.71em">Page G</tspan>
                                </text>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>
```

#### Props: LineChart

### LineChart

| 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. |
| 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 | false | 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 |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| 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. |
| lines | Array of Line | [] | Renders the provided Line components. |
| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |

#### Props: Line

### Line

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the line. |
| dataUnit | String \| Number | — | The unit of data displayed for the line. |
| legendType | String | square | The type of icon in legend. If set to "none", no legend item will be rendered. |
| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |
| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |
| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |

#### Props: ReferenceLine

### ReferenceLine

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |

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

LineChart with ReferenceLine
Custom label Page A Page B Page C Page D Page E Page F Page G Max Segment

#### React (tsx)

```tsx
import LineChart from '@rio-cloud/rio-uikit/LineChart';
import Line from '@rio-cloud/rio-uikit/Line';
import ReferenceLine from '@rio-cloud/rio-uikit/ReferenceLine';
import ChartTooltip from '@rio-cloud/rio-uikit/ChartTooltip';

type CustomData = {
    name: string;
    value: number;
};

export default () => (
    <>
        <label>LineChart with ReferenceLine</label>
        <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
            <LineChart
                data={data}
                dataKey={(entry: CustomData) => entry.name}
                xAxisOptions={{ padding: { left: 30, right: 30 } }}
                lines={[<Line key='line' type='monotone' dataKey={entry => entry.value} />]}
                tooltip={<ChartTooltip content={<CustomTooltip />} cursor={{ fill: '#ebf9fa80' }} />}
                referenceLines={[
                    <ReferenceLine key='x' x='Page E' stroke='color-coldplay-turquoise' label={<CustomLabel />} />,
                    <ReferenceLine key='y' y={3500} stroke='color-warmup-salmon' strokeDasharray='3 3' label='Max' />,
                    <ReferenceLine
                        key='segment'
                        stroke='color-warmup-salmon'
                        strokeDasharray='3 6'
                        segment={[
                            { x: 'Page A', y: 0 },
                            { x: 'Page E', y: 3500 },
                        ]}
                        label='Segment'
                    />,
                ]}
            />
        </div>
    </>
);

const CustomLabel = (props: any) => {
    const { viewBox } = props;
    return (
        <text x={viewBox.x + 5} y={viewBox.y + 90} fill='gray' textAnchor='right'>
            Custom label
        </text>
    );
};

const CustomTooltip = ({ active, payload }: { active?: boolean; payload?: any }) => {
    if (!active) {
        return null;
    }

    const firstValue = payload[0].value;

    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}`}</span>
                </div>
            </div>
        </div>
    );
};

const data: CustomData[] = [
    {
        name: 'Page A',
        value: 3200,
    },
    {
        name: 'Page B',
        value: 3000,
    },
    {
        name: 'Page C',
        value: 2000,
    },
    {
        name: 'Page D',
        value: 2780,
    },
    {
        name: 'Page E',
        value: 1890,
    },
    {
        name: 'Page F',
        value: 2390,
    },
    {
        name: 'Page G',
        value: 3490,
    },
];
```

#### HTML (html)

```html
<label>LineChart with ReferenceLine</label>
<div class="panel panel-default panel-body margin-bottom-0 height-200 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="168" class="recharts-wrapper" style="position: relative; cursor: default; width: 468px; height: 168px;">
                <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>
                <svg role="application" tabindex="0" class="recharts-surface" width="468" height="168" viewBox="0 0 468 168" 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="recharts2-clip">
                            <rect x="15" y="15" height="108" width="438">
                            </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>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r1:" height="108" width="438" class="recharts-curve recharts-line-curve" stroke-dasharray="46.0356px 51.388816833496094px" d="M45,27C66,28,87,29,108,33C129,37,150,63,171,63C192,63,213,39.6,234,39.6C255,39.6,276,66.3,297,66.3C318,66.3,339,59.3,360,51.3C381,43.3,402,30.8,423,18.3">
                                </path>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-reference-line">
                            <line x="Page E" stroke="#4eccc1 " fill="none" fill-opacity="1" stroke-width="1" x1="297" y1="123" x2="297" y2="15" class="recharts-reference-line-line">
                            </line>
                            <text x="302" y="105" fill="gray" text-anchor="right">Custom label</text>
                        </g>
                        <g class="recharts-layer recharts-reference-line">
                            <line y="3500" stroke-dasharray="3 3" stroke="#f19588 " fill="none" fill-opacity="1" stroke-width="1" x1="15" y1="18.000000000000004" x2="453" y2="18.000000000000004" class="recharts-reference-line-line">
                            </line>
                        </g>
                        <g class="recharts-layer recharts-reference-line">
                            <line stroke-dasharray="3 6" stroke="#f19588 " fill="none" fill-opacity="1" stroke-width="1" x1="45" y1="123" x2="297" y2="18.000000000000004" class="recharts-reference-line-line">
                            </line>
                        </g>
                    </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="15" y="123" width="438" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="453" y2="123">
                            </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="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="45" y1="129" x2="45" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="108" y1="129" x2="108" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="171" y1="129" x2="171" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="234" y1="129" x2="234" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="297" y1="129" x2="297" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="360" y1="129" x2="360" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="438" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="423" y1="129" x2="423" y2="123">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="45" cy="27.000000000000007" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="108" cy="33" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="171" cy="63" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="234" cy="39.599999999999994" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="297" cy="66.3" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="360" cy="51.3" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="438" cx="423" cy="18.3" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                    </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="438" stroke="none" x="45" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="45" dy="0.71em">Page A</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="108" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="108" dy="0.71em">Page B</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="171" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="171" dy="0.71em">Page C</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="234" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="234" dy="0.71em">Page D</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="297" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="297" dy="0.71em">Page E</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="360" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="360" dy="0.71em">Page F</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="438" stroke="none" x="423" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="423" dy="0.71em">Page G</tspan>
                                </text>
                            </g>
                        </g>
                        <text offset="5" x="234" y="18.000000000000004" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                            <tspan x="234" dy="0.355em">Max</tspan>
                        </text>
                        <text offset="5" x="171" y="70.5" class="recharts-text recharts-label" text-anchor="middle" fill="#808080">
                            <tspan x="171" dy="0.355em">Segment</tspan>
                        </text>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>
```

#### Props: LineChart

### LineChart

| 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. |
| 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 | false | 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 |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| 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. |
| lines | Array of Line | [] | Renders the provided Line components. |
| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |

#### Props: Line

### Line

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the line. |
| dataUnit | String \| Number | — | The unit of data displayed for the line. |
| legendType | String | square | The type of icon in legend. If set to "none", no legend item will be rendered. |
| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |
| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |
| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |

#### Props: ReferenceLine

### ReferenceLine

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |

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

Multiple lines in a LineChart with a brush for range selection

uv
pv
amt

Page A Page B Page C Page D Page E Page F Page G 0 2500 5000 7500 10000

#### React (tsx)

```tsx
import LineChart from '@rio-cloud/rio-uikit/LineChart';
import Line from '@rio-cloud/rio-uikit/Line';
import Legend from '@rio-cloud/rio-uikit/Legend';

type CustomData = {
    name: string;
    uv: number;
    pv: number;
    amt: number;
};

export default () => (
    <>
        <label>Multiple lines in a LineChart with a brush for range selection</label>
        <div className='panel panel-default panel-body margin-bottom-0 height-300'>
            <LineChart
                data={data}
                dataKey={(entry: CustomData) => entry.name}
                brush
                showYAxis
                showGrid
                legend={
                    <Legend
                        layout='horizontal'
                        verticalAlign='bottom'
                        iconType='line'
                        formatter={(_value: string, entry: any, index: number) => {
                            const { color } = entry;
                            return <span style={{ color }}>{Object.keys(data[0])[index + 1]}</span>;
                        }}
                    />
                }
                lines={[
                    <Line key='line1' name='uv' dataKey='uv' strokeColor='color-coldplay-fountain' />,
                    <Line key='line2' name='pv' dataKey='pv' strokeColor='color-coldplay-moos' />,
                    <Line key='line3' name='amt' dataKey='amt' strokeColor='color-warmup-raspberry' />,
                ]}
            />
        </div>
    </>
);

const data: CustomData[] = [
    {
        name: 'Page A',
        uv: 3200,
        pv: 2400,
        amt: 2400,
    },
    {
        name: 'Page B',
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: 'Page C',
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
    {
        name: 'Page D',
        uv: 2780,
        pv: 3908,
        amt: 2000,
    },
    {
        name: 'Page E',
        uv: 1890,
        pv: 4800,
        amt: 2181,
    },
    {
        name: 'Page F',
        uv: 2390,
        pv: 3800,
        amt: 2500,
    },
    {
        name: 'Page G',
        uv: 3490,
        pv: 4300,
        amt: 2100,
    },
];
```

#### HTML (html)

```html
<label>Multiple lines in a LineChart with a brush for range selection</label>
<div class="panel panel-default panel-body margin-bottom-0 height-300">
    <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="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; 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: 846px; height: auto; right: 15px; bottom: 15px;">
                    <ul class="recharts-default-legend" style="padding: 0px; margin: 0px; text-align: right;">
                        <li class="recharts-legend-item legend-item-0" style="display: inline-block; margin-right: 10px;">
                            <svg aria-label="amt 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 stroke-width="4" fill="none" stroke="#b23672 " d="M0,16h10.666666666666666
            A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16
            H32M21.333333333333332,16
            A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16" class="recharts-legend-icon">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(178, 54, 114);">
                                <span style="color: rgb(178, 54, 114);">uv</span>
                            </span>
                        </li>
                        <li class="recharts-legend-item legend-item-1" 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 stroke-width="4" fill="none" stroke="#a1daa3 " d="M0,16h10.666666666666666
            A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16
            H32M21.333333333333332,16
            A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16" class="recharts-legend-icon">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(161, 218, 163);">
                                <span style="color: rgb(161, 218, 163);">pv</span>
                            </span>
                        </li>
                        <li class="recharts-legend-item legend-item-2" 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 stroke-width="4" fill="none" stroke="#67abc5 " d="M0,16h10.666666666666666
            A5.333333333333333,5.333333333333333,0,1,1,21.333333333333332,16
            H32M21.333333333333332,16
            A5.333333333333333,5.333333333333333,0,1,1,10.666666666666666,16" class="recharts-legend-icon">
                                </path>
                            </svg>
                            <span class="recharts-legend-item-text" style="color: rgb(103, 171, 197);">
                                <span style="color: rgb(103, 171, 197);">amt</span>
                            </span>
                        </li>
                    </ul>
                </div>
                <svg role="application" tabindex="0" class="recharts-surface" width="876" height="268" viewBox="0 0 876 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="75" y="15" width="786" height="108" x1="75" y1="123" x2="861" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="96" x2="861" y2="96">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="69" x2="861" y2="69">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="42" x2="861" y2="42">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="15" x2="861" y2="15">
                                </line>
                            </g>
                            <g class="recharts-cartesian-grid-vertical">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="75" y1="15" x2="75" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="206" y1="15" x2="206" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="337" y1="15" x2="337" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="468" y1="15" x2="468" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="599" y1="15" x2="599" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="730" y1="15" x2="730" y2="123">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="786" height="108" x1="861" y1="15" x2="861" y2="123">
                                </line>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts3-clip">
                            <rect x="75" y="15" height="108" width="786">
                            </rect>
                        </clipPath>
                    </defs>
                    <g class="recharts-layer recharts-brush" style="user-select: none;">
                        <rect stroke="#a7afbb " fill="#fff" x="75" y="153" width="786" height="40">
                        </rect>
                        <rect class="recharts-brush-slide" stroke="none" fill="#a7afbb " fill-opacity="0.2" x="80" y="153" width="776" height="40" style="cursor: move;">
                        </rect>
                        <g class="recharts-layer recharts-brush-traveller" tabindex="0" role="slider" aria-label="Min value: Page A, Max value: Page G" aria-valuenow="75" style="cursor: col-resize;">
                            <rect x="75" y="153" width="5" height="40" fill="#a7afbb " stroke="none">
                            </rect>
                            <line x1="76" y1="172" x2="79" y2="172" fill="none" stroke="#fff">
                            </line>
                            <line x1="76" y1="174" x2="79" y2="174" fill="none" stroke="#fff">
                            </line>
                        </g>
                        <g class="recharts-layer recharts-brush-traveller" tabindex="0" role="slider" aria-label="Min value: Page A, Max value: Page G" aria-valuenow="856" style="cursor: col-resize;">
                            <rect x="856" y="153" width="5" height="40" fill="#a7afbb " stroke="none">
                            </rect>
                            <line x1="857" y1="172" x2="860" y2="172" fill="none" stroke="#fff">
                            </line>
                            <line x1="857" y1="174" x2="860" y2="174" fill="none" stroke="#fff">
                            </line>
                        </g>
                    </g>
                    <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>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="uv" stroke="#67abc5 " fill="none" stroke-width="1" id="recharts-line-:r2:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="787.956298828125px 787.956298828125px" d="M75,88.44C118.667,88.8,162.333,89.16,206,90.6C249.667,92.04,293.333,101.4,337,101.4C380.667,101.4,424.333,92.976,468,92.976C511.667,92.976,555.333,102.588,599,102.588C642.667,102.588,686.333,100.068,730,97.188C773.667,94.308,817.333,89.808,861,85.308">
                                </path>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="pv" stroke="#a1daa3 " fill="none" stroke-width="1" id="recharts-line-:r3:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="836.8355px 836.8355102539062px" d="M75,97.08C118.667,102.491,162.333,107.902,206,107.902C249.667,107.902,293.333,17.16,337,17.16C380.667,17.16,424.333,80.794,468,80.794C511.667,80.794,555.333,71.16,599,71.16C642.667,71.16,686.333,81.96,730,81.96C773.667,81.96,817.333,79.26,861,76.56">
                                </path>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="amt" stroke="#b23672 " fill="none" stroke-width="1" id="recharts-line-:r4:" height="108" width="786" class="recharts-curve recharts-line-curve" stroke-dasharray="786.2213px 786.2213134765625px" d="M75,97.08C118.667,98.106,162.333,99.132,206,99.132C249.667,99.132,293.333,98.268,337,98.268C380.667,98.268,424.333,101.4,468,101.4C511.667,101.4,555.333,100.345,599,99.445C642.667,98.545,686.333,96,730,96C773.667,96,817.333,98.16,861,100.32">
                                </path>
                            </g>
                        </g>
                    </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="75" y="123" width="786" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="123" x2="861" y2="123">
                            </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="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="75" y1="129" x2="75" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="206" y1="129" x2="206" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="337" y1="129" x2="337" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="468" y1="129" x2="468" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="599" y1="129" x2="599" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="730" y1="129" x2="730" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="123" width="786" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="861" y1="129" x2="861" y2="123">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
                            <line angle="0" orientation="left" width="60" x="15" y="15" height="108" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="15" x2="75" y2="123">
                            </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="15" y="15" height="108" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="123" x2="75" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="108" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="96" x2="75" y2="96">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="108" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="69" x2="75" y2="69">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="108" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="42" x2="75" y2="42">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="108" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="15" x2="75" y2="15">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="75" cy="88.43999999999998" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="206" cy="90.6" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="337" cy="101.4" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="468" cy="92.976" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="599" cy="102.58799999999998" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="730" cy="97.18799999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="uv" stroke="#67abc5 " fill="#fff" stroke-width="1" height="108" width="786" cx="861" cy="85.308" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="75" cy="97.08" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="206" cy="107.90159999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="337" cy="17.16" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="468" cy="80.79359999999998" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="599" cy="71.16" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="730" cy="81.96000000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="pv" stroke="#a1daa3 " fill="#fff" stroke-width="1" height="108" width="786" cx="861" cy="76.56000000000002" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="75" cy="97.08" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="206" cy="99.132" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="337" cy="98.268" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="468" cy="101.4" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="599" cy="99.44520000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="730" cy="96" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="amt" stroke="#b23672 " fill="#fff" stroke-width="1" height="108" width="786" cx="861" cy="100.32000000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                    </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="786" stroke="none" x="75" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="75" dy="0.71em">Page A</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="206" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="206" dy="0.71em">Page B</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="337" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="337" dy="0.71em">Page C</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="468" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="468" dy="0.71em">Page D</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="599" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="599" dy="0.71em">Page E</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="730" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="730" dy="0.71em">Page F</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="786" stroke="none" x="856.1875" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="856.1875" 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 orientation="left" width="60" height="108" stroke="none" x="67" y="123" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">0</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="108" stroke="none" x="67" y="96" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">2500</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="108" stroke="none" x="67" y="69" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">5000</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="108" stroke="none" x="67" y="42" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">7500</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="108" stroke="none" x="67" y="15" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">10000</tspan>
                                </text>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>
```

#### Props: LineChart

### LineChart

| 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. |
| 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 | false | 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 |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| 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. |
| lines | Array of Line | [] | Renders the provided Line components. |
| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |

#### Props: Line

### Line

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the line. |
| dataUnit | String \| Number | — | The unit of data displayed for the line. |
| legendType | String | square | The type of icon in legend. If set to "none", no legend item will be rendered. |
| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |
| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |
| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |

#### Props: ReferenceLine

### ReferenceLine

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |

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

Multiple axes in a LineChart with a brush for range selection

Extreme
Moderate
Nominal

Now 00:15 00:45 01:15 01:45 02:15 02:45 03:15 03:45 04:15 04:45 0 30 60 90 120 Planned Charging Discharging Interruption

#### React (tsx)

```tsx
import { useState } from 'react';

import LineChart from '@rio-cloud/rio-uikit/LineChart';
import Line from '@rio-cloud/rio-uikit/Line';
import Legend from '@rio-cloud/rio-uikit/Legend';
import Tooltip from '@rio-cloud/rio-uikit/Tooltip';
import XAxis from '@rio-cloud/rio-uikit/XAxis';
import ReferenceLine from '@rio-cloud/rio-uikit/ReferenceLine';

type CustomData = {
    time: string;
    nominal: number;
    moderate: number;
    extreme: number;
    status: string;
};

const getCurrentTime = () =>
    new Date().toLocaleTimeString('de-DE', {
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
    });

export default () => {
    const [highlightedLine, setHighlightedLine] = useState<string | null>(null);

    const handleLegendMouseEnter = (dataKey: string) => {
        setHighlightedLine(dataKey);
    };

    const handleLegendMouseLeave = () => {
        setHighlightedLine(null);
    };

    const lineData = [
        { dataKey: 'nominal', name: 'Nominal', strokeColor: 'color-coldplay-fountain' },
        { dataKey: 'moderate', name: 'Moderate', strokeColor: 'color-coldplay-moos' },
        { dataKey: 'extreme', name: 'Extreme', strokeColor: 'color-warmup-raspberry' },
    ];

    return (
        <>
            <label>Multiple axes in a LineChart with a brush for range selection</label>
            <div className='panel panel-default panel-body margin-bottom-0 height-300'>
                <LineChart
                    data={data}
                    brush
                    showGrid
                    showYAxis
                    xAxisOptions={{ dataKey: 'time', xAxisId: '0' }}
                    additionalAxes={[<XAxis key='1' xAxisId='1' dataKey='status' allowDuplicatedCategory={false} />]}
                    gridOptions={{ strokeDasharray: '3 3' }}
                    tooltip={<Tooltip />}
                    legend={
                        <Legend
                            content={
                                <CustomLegend
                                    highlightedLine={highlightedLine}
                                    onMouseEnter={handleLegendMouseEnter}
                                    onMouseLeave={handleLegendMouseLeave}
                                />
                            }
                        />
                    }
                    referenceLines={[
                        <ReferenceLine
                            key='currentTime'
                            x='03:30'
                            stroke='color-warmup-salmon'
                            label={<CustomLabel />}
                        />,
                    ]}
                    brushOptions={{ dataKey: 'date', height: 20 }}
                    lines={lineData.map((line, index) => (
                        <Line
                            key={`line${index + 1}`}
                            name={line.name}
                            dataKey={line.dataKey}
                            strokeColor={line.strokeColor}
                            activeDot={index === 0 ? { r: 8 } : undefined}
                            strokeWidth={highlightedLine === line.dataKey ? 2 : 1}
                            dot={{ strokeWidth: highlightedLine === line.dataKey ? 2 : 1 }}
                        />
                    ))}
                />
            </div>
        </>
    );
};

const CustomLabel = (props: any) => {
    const { viewBox } = props;
    return (
        <text x={viewBox.x + 5} y={viewBox.y + 15} fill='gray' textAnchor='right'>
            Now
        </text>
    );
};

type CustomLegendProps = {
    payload?: any[];
    highlightedLine: string | null;
    onMouseEnter: (dataKey: string) => void;
    onMouseLeave: () => void;
};

const CustomLegend = ({ payload, highlightedLine, onMouseEnter, onMouseLeave }: CustomLegendProps) => (
    <ul className='list-style-none padding-left-20'>
        {payload?.map((entry: any, index: number) => (
            <li
                key={`item-${index}`}
                onMouseEnter={() => onMouseEnter(entry.dataKey)}
                onMouseLeave={onMouseLeave}
                className={`cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ${highlightedLine === entry.dataKey ? 'bg-lightest' : ''}`}
            >
                <span className='rioglyph rioglyph-sphere' style={{ color: entry.color }} />
                <span className='text-color-darker text-capitalize-first-word'>{entry.value}</span>
            </li>
        ))}
    </ul>
);

const data: CustomData[] = [
    {
        time: '00:00',
        nominal: 94.62,
        moderate: 94.72,
        extreme: 101.45,
        status: 'Planned',
    },
    {
        time: '00:15',
        nominal: 79.16,
        moderate: 85.05,
        extreme: 79.05,
        status: 'Planned',
    },
    {
        time: '00:30',
        nominal: 62.79,
        moderate: 74.82,
        extreme: 55.34,
        status: 'Planned',
    },
    {
        time: '00:45',
        nominal: 49.19,
        moderate: 66.32,
        extreme: 35.64,
        status: 'Planned',
    },
    {
        time: '01:00',
        nominal: 73.74,
        moderate: 81.59,
        extreme: 74.15,
        status: 'Charging',
    },
    {
        time: '01:15',
        nominal: 61.45,
        moderate: 73.9,
        extreme: 56.34,
        status: 'Charging',
    },
    {
        time: '01:30',
        nominal: 53.24,
        moderate: 68.78,
        extreme: 44.46,
        status: 'Charging',
    },
    {
        time: '01:45',
        nominal: 46.88,
        moderate: 64.8,
        extreme: 35.24,
        status: 'Charging',
    },
    {
        time: '02:00',
        nominal: 65.86,
        moderate: 76.63,
        extreme: 63.98,
        status: 'Charging',
    },
    {
        time: '02:15',
        nominal: 56.26,
        moderate: 70.63,
        extreme: 50.08,
        status: 'Discharging',
    },
    {
        time: '02:30',
        nominal: 53.08,
        moderate: 68.64,
        extreme: 45.48,
        status: 'Discharging',
    },
    {
        time: '02:45',
        nominal: 50.67,
        moderate: 67.14,
        extreme: 41.99,
        status: 'Discharging',
    },
    {
        time: '03:00',
        nominal: 45.38,
        moderate: 63.81,
        extreme: 35.02,
        status: 'Charging',
    },
    {
        time: '03:15',
        nominal: 49.21,
        moderate: 66.2,
        extreme: 40.57,
        status: 'Charging',
    },
    {
        time: '03:30',
        nominal: 55.23,
        moderate: 69.97,
        extreme: 49.28,
        status: 'Charging',
    },
    {
        time: '03:45',
        nominal: 64.17,
        moderate: 75.55,
        extreme: 62.23,
        status: 'Interruption',
    },
    {
        time: '04:00',
        nominal: 60.17,
        moderate: 71.55,
        extreme: 59.23,
        status: 'Interruption',
    },
    {
        time: '04:15',
        nominal: 64.17,
        moderate: 75.55,
        extreme: 62.23,
        status: 'Interruption',
    },
    {
        time: '04:30',
        nominal: 64.17,
        moderate: 75.55,
        extreme: 62.23,
        status: 'Interruption',
    },
    {
        time: '04:45',
        nominal: 64.17,
        moderate: 75.55,
        extreme: 62.23,
        status: 'Interruption',
    },
];
```

#### HTML (html)

```html
<label>Multiple axes in a LineChart with a brush for range selection</label>
<div class="panel panel-default panel-body margin-bottom-0 height-300">
    <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="876" height="268" class="recharts-wrapper" style="position: relative; cursor: default; width: 876px; 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: 15px; top: 15px;">
                    <ul class="list-style-none padding-left-20">
                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
                            <span class="rioglyph rioglyph-sphere" style="color: rgb(178, 54, 114);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">Extreme</span>
                        </li>
                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
                            <span class="rioglyph rioglyph-sphere" style="color: rgb(161, 218, 163);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">Moderate</span>
                        </li>
                        <li class="cursor-pointer display-flex gap-5 align-items-center rounded padding-x-5 padding-y-3 ">
                            <span class="rioglyph rioglyph-sphere" style="color: rgb(103, 171, 197);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">Nominal</span>
                        </li>
                    </ul>
                </div>
                <svg role="application" tabindex="0" class="recharts-surface" width="876" height="268" viewBox="0 0 876 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="75" y="15" width="681.640625" height="158" x1="75" y1="173" x2="756.640625" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="133.5" x2="756.640625" y2="133.5">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="94" x2="756.640625" y2="94">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="54.5" x2="756.640625" y2="54.5">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="15" x2="756.640625" y2="15">
                                </line>
                            </g>
                            <g class="recharts-cartesian-grid-vertical">
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="110.87582236842105" y1="15" x2="110.87582236842105" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="182.62746710526318" y1="15" x2="182.62746710526318" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="254.37911184210526" y1="15" x2="254.37911184210526" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="326.1307565789474" y1="15" x2="326.1307565789474" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="397.8824013157895" y1="15" x2="397.8824013157895" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="469.6340460526316" y1="15" x2="469.6340460526316" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="541.3856907894738" y1="15" x2="541.3856907894738" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="613.1373355263158" y1="15" x2="613.1373355263158" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="684.8889802631579" y1="15" x2="684.8889802631579" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="756.640625" y1="15" x2="756.640625" y2="173">
                                </line>
                                <line stroke-dasharray="3 3" stroke="#ccc" fill="none" x="75" y="15" width="681.640625" height="158" x1="75" y1="15" x2="75" y2="173">
                                </line>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_-50">
                    </g>
                    <defs>
                        <clipPath id="recharts4-clip">
                            <rect x="75" y="15" height="158" width="681.640625">
                            </rect>
                        </clipPath>
                    </defs>
                    <g class="recharts-layer recharts-brush" style="user-select: none;">
                        <rect stroke="#a7afbb " fill="#fff" x="75" y="233" width="681.640625" height="20">
                        </rect>
                        <rect class="recharts-brush-slide" stroke="none" fill="#a7afbb " fill-opacity="0.2" x="80" y="233" width="671.640625" height="20" style="cursor: move;">
                        </rect>
                        <g class="recharts-layer recharts-brush-traveller" tabindex="0" role="slider" aria-label="Min value: undefined, Max value: undefined" aria-valuenow="75" style="cursor: col-resize;">
                            <rect x="75" y="233" width="5" height="20" fill="#a7afbb " stroke="none">
                            </rect>
                            <line x1="76" y1="242" x2="79" y2="242" fill="none" stroke="#fff">
                            </line>
                            <line x1="76" y1="244" x2="79" y2="244" fill="none" stroke="#fff">
                            </line>
                        </g>
                        <g class="recharts-layer recharts-brush-traveller" tabindex="0" role="slider" aria-label="Min value: undefined, Max value: undefined" aria-valuenow="751.640625" style="cursor: col-resize;">
                            <rect x="751.640625" y="233" width="5" height="20" fill="#a7afbb " stroke="none">
                            </rect>
                            <line x1="752.640625" y1="242" x2="755.640625" y2="242" fill="none" stroke="#fff">
                            </line>
                            <line x1="752.640625" y1="244" x2="755.640625" y2="244" fill="none" stroke="#fff">
                            </line>
                        </g>
                    </g>
                    <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>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                        <g class="recharts-layer recharts-reference-line">
                            <line x="03:30" stroke="#f19588 " fill="none" fill-opacity="1" stroke-width="1" x1="577.2615131578948" y1="173" x2="577.2615131578948" y2="15" class="recharts-reference-line-line">
                            </line>
                            <text x="582.2615131578948" y="30" fill="gray" text-anchor="right">Now</text>
                        </g>
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="Nominal" stroke-width="1" stroke="#67abc5 " fill="none" id="recharts-line-:r5:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="734.8751831054688px 734.8751831054688px" d="M75,48.417C86.959,55.102,98.917,61.788,110.876,68.773C122.834,75.758,134.793,83.75,146.752,90.327C158.71,96.903,170.669,108.233,182.627,108.233C194.586,108.233,206.545,75.909,218.503,75.909C230.462,75.909,242.421,87.592,254.379,92.091C266.338,96.589,278.296,99.703,290.255,102.901C302.214,106.098,314.172,111.275,326.131,111.275C338.089,111.275,350.048,86.284,362.007,86.284C373.965,86.284,385.924,96.133,397.882,98.924C409.841,101.716,421.8,101.885,433.758,103.111C445.717,104.338,457.675,104.595,469.634,106.285C481.593,107.974,493.551,113.25,505.51,113.25C517.468,113.25,529.427,110.368,541.386,108.207C553.344,106.045,565.303,103.563,577.262,100.28C589.22,96.998,601.179,88.509,613.137,88.509C625.096,88.509,637.055,93.776,649.013,93.776C660.972,93.776,672.93,88.509,684.889,88.509C696.848,88.509,708.806,88.509,720.765,88.509C732.723,88.509,744.682,88.509,756.641,88.509">
                                </path>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="none" id="recharts-line-:r6:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="704.3584594726562px 704.3584594726562px" d="M75,48.285C86.959,52.468,98.917,56.651,110.876,61.018C122.834,65.384,134.793,70.377,146.752,74.487C158.71,78.597,170.669,85.679,182.627,85.679C194.586,85.679,206.545,65.573,218.503,65.573C230.462,65.573,242.421,72.887,254.379,75.698C266.338,78.509,278.296,80.443,290.255,82.44C302.214,84.437,314.172,87.68,326.131,87.68C338.089,87.68,350.048,72.104,362.007,72.104C373.965,72.104,385.924,78.257,397.882,80.004C409.841,81.751,421.8,81.858,433.758,82.624C445.717,83.39,457.675,83.539,469.634,84.599C481.593,85.659,493.551,88.983,505.51,88.983C517.468,88.983,529.427,87.188,541.386,85.837C553.344,84.485,565.303,82.925,577.262,80.873C589.22,78.821,601.179,73.526,613.137,73.526C625.096,73.526,637.055,78.793,649.013,78.793C660.972,78.793,672.93,73.526,684.889,73.526C696.848,73.526,708.806,73.526,720.765,73.526C732.723,73.526,744.682,73.526,756.641,73.526">
                                </path>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path name="Extreme" stroke-width="1" stroke="#b23672 " fill="none" id="recharts-line-:r7:" height="158" width="681.640625" class="recharts-curve recharts-line-curve" stroke-dasharray="786.7827px 786.78271484375px" d="M75,39.424C86.959,49.112,98.917,58.799,110.876,68.918C122.834,79.036,134.793,90.61,146.752,100.136C158.71,109.662,170.669,126.074,182.627,126.074C194.586,126.074,206.545,75.369,218.503,75.369C230.462,75.369,242.421,92.304,254.379,98.819C266.338,105.334,278.296,109.831,290.255,114.461C302.214,119.091,314.172,126.601,326.131,126.601C338.089,126.601,350.048,88.76,362.007,88.76C373.965,88.76,385.924,103.024,397.882,107.061C409.841,111.099,421.8,111.343,433.758,113.118C445.717,114.893,457.675,115.418,469.634,117.713C481.593,120.009,493.551,126.89,505.51,126.89C517.468,126.89,529.427,122.712,541.386,119.583C553.344,116.454,565.303,112.868,577.262,108.115C589.22,103.361,601.179,91.064,613.137,91.064C625.096,91.064,637.055,95.014,649.013,95.014C660.972,95.014,672.93,91.064,684.889,91.064C696.848,91.064,708.806,91.064,720.765,91.064C732.723,91.064,744.682,91.064,756.641,91.064">
                                </path>
                            </g>
                        </g>
                    </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="75" y="173" width="681.640625" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="173" x2="756.640625" y2="173">
                            </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="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="110.87582236842105" y1="179" x2="110.87582236842105" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="182.62746710526318" y1="179" x2="182.62746710526318" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="254.37911184210526" y1="179" x2="254.37911184210526" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="326.1307565789474" y1="179" x2="326.1307565789474" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="397.8824013157895" y1="179" x2="397.8824013157895" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="469.6340460526316" y1="179" x2="469.6340460526316" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="541.3856907894738" y1="179" x2="541.3856907894738" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="613.1373355263158" y1="179" x2="613.1373355263158" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="684.8889802631579" y1="179" x2="684.8889802631579" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="173" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="756.640625" y1="179" x2="756.640625" y2="173">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-cartesian-axis recharts-yAxis yAxis">
                            <line angle="0" orientation="left" width="60" x="15" y="15" height="158" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="15" x2="75" y2="173">
                            </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="15" y="15" height="158" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="173" x2="75" y2="173">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="158" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="133.5" x2="75" y2="133.5">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="158" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="94" x2="75" y2="94">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="158" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="54.5" x2="75" y2="54.5">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" orientation="left" width="60" x="15" y="15" height="158" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="69" y1="15" x2="75" y2="15">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                        <g class="recharts-layer recharts-cartesian-axis recharts-xAxis xAxis">
                            <line angle="0" height="30" orientation="bottom" x="75" y="203" width="681.640625" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="75" y1="203" x2="756.640625" y2="203">
                            </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="75" y="203" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="75" y1="209" x2="75" y2="203">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="203" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="302.21354166666663" y1="209" x2="302.21354166666663" y2="203">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="203" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="529.4270833333333" y1="209" x2="529.4270833333333" y2="203">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="75" y="203" width="681.640625" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="756.640625" y1="209" x2="756.640625" y2="203">
                                        </line>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_600">
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="75" cy="48.41699999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="110.87582236842105" cy="68.77266666666668" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="146.7516447368421" cy="90.3265" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="182.62746710526318" cy="108.23316666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="218.50328947368422" cy="75.909" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="254.37911184210526" cy="92.09083333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="290.25493421052636" cy="102.90066666666667" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="326.1307565789474" cy="111.27466666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="362.00657894736844" cy="86.28433333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="397.8824013157895" cy="98.92433333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="433.7582236842105" cy="103.11133333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="469.6340460526316" cy="106.2845" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="505.50986842105266" cy="113.24966666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="541.3856907894738" cy="108.20683333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="577.2615131578948" cy="100.28049999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="613.1373355263158" cy="88.50949999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="649.0131578947369" cy="93.77616666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="684.8889802631579" cy="88.50949999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="720.764802631579" cy="88.50949999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Nominal" stroke-width="1" stroke="#67abc5 " fill="#fff" height="158" width="681.640625" cx="756.640625" cy="88.50949999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="75" cy="48.28533333333333" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="110.87582236842105" cy="61.017500000000005" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="146.7516447368421" cy="74.487" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="182.62746710526318" cy="85.67866666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="218.50328947368422" cy="65.57316666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="254.37911184210526" cy="75.69833333333332" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="290.25493421052636" cy="82.43966666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="326.1307565789474" cy="87.68" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="362.00657894736844" cy="72.10383333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="397.8824013157895" cy="80.00383333333333" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="433.7582236842105" cy="82.62400000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="469.6340460526316" cy="84.599" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="505.50986842105266" cy="88.98349999999999" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="541.3856907894738" cy="85.83666666666667" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="577.2615131578948" cy="80.87283333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="613.1373355263158" cy="73.52583333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="649.0131578947369" cy="78.7925" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="684.8889802631579" cy="73.52583333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="720.764802631579" cy="73.52583333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Moderate" stroke-width="1" stroke="#a1daa3 " fill="#fff" height="158" width="681.640625" cx="756.640625" cy="73.52583333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                        <g class="recharts-layer recharts-line-dots">
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="75" cy="39.42416666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="110.87582236842105" cy="68.9175" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="146.7516447368421" cy="100.13566666666667" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="182.62746710526318" cy="126.07400000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="218.50328947368422" cy="75.36916666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="254.37911184210526" cy="98.819" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="290.25493421052636" cy="114.461" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="326.1307565789474" cy="126.60066666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="362.00657894736844" cy="88.75966666666666" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="397.8824013157895" cy="107.06133333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="433.7582236842105" cy="113.118" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="469.6340460526316" cy="117.71316666666667" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="505.50986842105266" cy="126.89033333333332" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="541.3856907894738" cy="119.58283333333334" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="577.2615131578948" cy="108.11466666666665" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="613.1373355263158" cy="91.06383333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="649.0131578947369" cy="95.01383333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="684.8889802631579" cy="91.06383333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="720.764802631579" cy="91.06383333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" name="Extreme" stroke-width="1" stroke="#b23672 " fill="#fff" height="158" width="681.640625" cx="756.640625" cy="91.06383333333335" class="recharts-dot recharts-line-dot">
                            </circle>
                        </g>
                    </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="681.640625" stroke="none" x="110.87582236842105" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="110.87582236842105" dy="0.71em">00:15</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="182.62746710526318" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="182.62746710526318" dy="0.71em">00:45</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="254.37911184210526" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="254.37911184210526" dy="0.71em">01:15</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="326.1307565789474" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="326.1307565789474" dy="0.71em">01:45</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="397.8824013157895" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="397.8824013157895" dy="0.71em">02:15</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="469.6340460526316" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="469.6340460526316" dy="0.71em">02:45</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="541.3856907894738" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="541.3856907894738" dy="0.71em">03:15</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="613.1373355263158" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="613.1373355263158" dy="0.71em">03:45</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="684.8889802631579" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="684.8889802631579" dy="0.71em">04:15</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="756.640625" y="181" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="756.640625" dy="0.71em">04:45</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 orientation="left" width="60" height="158" stroke="none" x="67" y="173" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">0</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="158" stroke="none" x="67" y="133.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">30</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="158" stroke="none" x="67" y="94" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">60</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="158" stroke="none" x="67" y="54.5" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">90</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text orientation="left" width="60" height="158" stroke="none" x="67" y="15" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="end" fill="#666">
                                    <tspan x="67" dy="0.355em">120</tspan>
                                </text>
                            </g>
                        </g>
                        <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="681.640625" stroke="none" x="75" y="211" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="75" dy="0.71em">Planned</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="302.21354166666663" y="211" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="302.21354166666663" dy="0.71em">Charging</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="529.4270833333333" y="211" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="529.4270833333333" dy="0.71em">Discharging</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="681.640625" stroke="none" x="756.640625" y="211" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="756.640625" dy="0.71em">Interruption</tspan>
                                </text>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>
```

#### Props: LineChart

### LineChart

| 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. |
| 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 | false | 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 |
| containerOptions | Object | — | Detailed options passed to the underlying ResponsiveContainer component. Details can be found here: https://recharts.org/en-US/api/ResponsiveContainer |
| 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. |
| lines | Array of Line | [] | Renders the provided Line components. |
| ... |  | — | Additional props are passed to the underlying LineChart component. Details can be found here: https://recharts.org/en-US/api/LineChart |

#### Props: Line

### Line

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| strokeColor | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| dataKey | string \| number \| ((obj: T) => any) | value | The key of data used for the line. |
| dataUnit | String \| Number | — | The unit of data displayed for the line. |
| legendType | String | square | The type of icon in legend. If set to "none", no legend item will be rendered. |
| type | String | monotone | The interpolation type of line. And customized interpolation function can be set to type. It is the same as type in Area. |
| isAnimationActive | Boolean | true | If set false, animation of line will be disabled. |
| ... |  | — | Additional props are passed to the underlying Line component. Details can be found here: https://recharts.org/en-US/api/Line |

#### Props: ReferenceLine

### ReferenceLine

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| stroke | String | color-coldplay-fountain | Defines the color for the line. Take the color name from the charts colors page. |
| ... |  | — | Additional props are passed to the underlying ReferenceLine component. Details can be found here: https://recharts.org/en-US/api/ReferenceLine |

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