# ComposedChart

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

## ComposedChart

> Note: When using a chart in your application, do not get fancy and try to stick to the proposed examples or at least base your chart upon them. That will save time and money and, equally important, gives the user a coherent look and feel across the different services.

### Example: Simple ComposedChart

Simple ComposedChart

amt
pv
uv

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

#### React (tsx)

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

import ComposedChart from '@rio-cloud/rio-uikit/ComposedChart';
import Line from '@rio-cloud/rio-uikit/Line';
import Bar from '@rio-cloud/rio-uikit/Bar';
import Area from '@rio-cloud/rio-uikit/Area';
import Legend from '@rio-cloud/rio-uikit/Legend';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

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

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

    const handleLegendMouseEnter = (dataKey: string) => setHighlightedElement(dataKey);
    const handleLegendMouseLeave = () => setHighlightedElement(null);

    return (
        <>
            <FormLabel>Simple ComposedChart</FormLabel>
            <div className='panel panel-default panel-body margin-bottom-0 height-200 max-width-500'>
                <ComposedChart
                    data={data}
                    dataKey={(entry: CustomData) => entry.name}
                    xAxisOptions={{ padding: { left: 30, right: 30 } }}
                    showGrid
                    gridOptions={{ vertical: false, strokeDasharray: '0', stroke: 'gray-lighter' }}
                    legend={
                        <Legend
                            content={
                                <CustomLegend
                                    highlightedElement={highlightedElement}
                                    onMouseEnter={handleLegendMouseEnter}
                                    onMouseLeave={handleLegendMouseLeave}
                                />
                            }
                        />
                    }
                    lines={[
                        <Line
                            key='line'
                            dataKey='uv'
                            strokeColor='brand-primary'
                            strokeWidth={highlightedElement === 'uv' ? 2 : 1}
                            dot={{ strokeWidth: highlightedElement === 'uv' ? 2 : 1 }}
                        />,
                    ]}
                    areas={[
                        <Area
                            key='area'
                            dataKey='amt'
                            strokeColor='color-spectrum-pink'
                            fill='color-spectrum-pink'
                            fillOpacity={highlightedElement === 'amt' || !highlightedElement ? 0.5 : 0.1}
                        />,
                    ]}
                    bars={[
                        <Bar
                            key='bar'
                            dataKey='pv'
                            color='color-spectrum-indigo'
                            radius={[3, 3, 0, 0]}
                            fillOpacity={highlightedElement === 'pv' || !highlightedElement ? 1 : 0.3}
                        />,
                    ]}
                />
            </div>
        </>
    );
};

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

const CustomLegend = ({ payload, highlightedElement, 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 ${highlightedElement === 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[] = [
    {
        name: 'Page A',
        uv: 590,
        pv: 800,
        amt: 1400,
    },
    {
        name: 'Page B',
        uv: 868,
        pv: 967,
        amt: 1506,
    },
    {
        name: 'Page C',
        uv: 1397,
        pv: 1098,
        amt: 989,
    },
    {
        name: 'Page D',
        uv: 1480,
        pv: 1200,
        amt: 1228,
    },
    {
        name: 'Page E',
        uv: 1520,
        pv: 1108,
        amt: 1100,
    },
    {
        name: 'Page F',
        uv: 1400,
        pv: 680,
        amt: 1700,
    },
];
```

#### HTML (html)

```html
<div class="text-color-dark max-width-100pct text-size-12 display-inline-block margin-bottom-5">Simple ComposedChart</div>
<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>
                <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(232, 120, 182);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">amt</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(142, 150, 235);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">pv</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(48, 180, 192);">
                            </span>
                            <span class="text-color-darker text-capitalize-first-word">uv</span>
                        </li>
                    </ul>
                </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="365.03125" height="108" x1="15" y1="123" x2="380.03125" y2="123">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="96" x2="380.03125" y2="96">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="69" x2="380.03125" y2="69">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="42" x2="380.03125" y2="42">
                                </line>
                                <line stroke-dasharray="0" stroke="#e5ebf0 " fill="none" x="15" y="15" width="365.03125" height="108" x1="15" y1="15" x2="380.03125" 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="365.03125">
                            </rect>
                        </clipPath>
                    </defs>
                    <g tabindex="-1" class="recharts-zIndex-layer_100">
                        <g class="recharts-layer recharts-area">
                            <g class="recharts-layer">
                                <defs>
                                    <clipPath id="animationClipPath-recharts-area-:r0:">
                                        <rect x="70.41927083333333" y="0" width="59.349085855802734" height="124">
                                        </rect>
                                    </clipPath>
                                </defs>
                                <g class="recharts-layer" clip-path="url(#animationClipPath-recharts-area-:r0:)">
                                    <g class="recharts-layer">
                                        <path stroke-width="1" fill="#e878b6 " fill-opacity="0.5" height="108" stroke="none" width="365.03125" id="recharts-area-:r0:" class="recharts-curve recharts-area-area" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21L324.612,123C307.666,123,290.72,123,273.773,123C256.827,123,239.881,123,222.935,123C205.989,123,189.043,123,172.096,123C155.15,123,138.204,123,121.258,123C104.312,123,87.365,123,70.419,123Z">
                                        </path>
                                        <path stroke-width="1" fill="none" fill-opacity="0.5" height="108" stroke="#e878b6 " width="365.03125" class="recharts-curve recharts-area-curve" d="M70.419,39C87.365,35.82,104.312,32.64,121.258,32.64C138.204,32.64,155.15,63.66,172.096,63.66C189.043,63.66,205.989,49.32,222.935,49.32C239.881,49.32,256.827,57,273.773,57C290.72,57,307.666,39,324.612,21">
                                        </path>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_200">
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_300">
                        <g class="recharts-layer recharts-bar" id="recharts-bar-:r1:">
                            <g class="recharts-layer recharts-bar-rectangles">
                                <g class="recharts-layer">
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page A" x="50.0839" y="79.1153" width="40" height="43.8847" class="recharts-rectangle" d="M50.0839,82.1153A 3,3,0,0,1,53.0839,79.1153L 87.0839,79.1153A 3,3,0,0,1,
        90.0839,82.1153L 90.0839,123L 50.0839,123Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page B" x="100.9224" y="69.9543" width="40" height="53.0457" class="recharts-rectangle" d="M100.9224,72.9543A 3,3,0,0,1,103.9224,69.9543L 137.9224,69.9543A 3,3,0,0,1,
        140.9224,72.9543L 140.9224,123L 100.9224,123Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page C" x="151.7609" y="62.7682" width="40" height="60.2318" class="recharts-rectangle" d="M151.7609,65.7682A 3,3,0,0,1,154.7609,62.7682L 188.7609,62.7682A 3,3,0,0,1,
        191.7609,65.7682L 191.7609,123L 151.7609,123Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page D" x="202.5995" y="57.1729" width="40" height="65.8271" class="recharts-rectangle" d="M202.5995,60.1729A 3,3,0,0,1,205.5995,57.1729L 239.5995,57.1729A 3,3,0,0,1,
        242.5995,60.1729L 242.5995,123L 202.5995,123Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page E" x="253.438" y="62.2196" width="40" height="60.7804" class="recharts-rectangle" d="M253.438,65.2196A 3,3,0,0,1,256.438,62.2196L 290.438,62.2196A 3,3,0,0,1,
        293.438,65.2196L 293.438,123L 253.438,123Z">
                                            </path>
                                        </g>
                                    </g>
                                    <g class="recharts-layer recharts-bar-rectangle">
                                        <g class="recharts-layer recharts-inactive-bar">
                                            <path fill-opacity="1" fill="#8e96eb " name="Page F" x="304.2766" y="85.698" width="40" height="37.302" class="recharts-rectangle" d="M304.2766,88.698A 3,3,0,0,1,307.2766,85.698L 341.2766,85.698A 3,3,0,0,1,
        344.2766,88.698L 344.2766,123L 304.2766,123Z">
                                            </path>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </g>
                    <g tabindex="-1" class="recharts-zIndex-layer_400">
                        <g class="recharts-layer recharts-line">
                            <g class="recharts-layer recharts-shape">
                                <path stroke-width="1" stroke="#30b4c0 " fill="none" id="recharts-line-:r2:" height="108" width="365.03125" class="recharts-curve recharts-line-curve" stroke-dasharray="62.4306px 267.3907775878906px" d="M70.419,87.6C87.365,83.295,104.312,78.99,121.258,70.92C138.204,62.85,155.15,42.5,172.096,39.18C189.043,35.86,205.989,35.43,222.935,34.2C239.881,32.97,256.827,31.8,273.773,31.8C290.72,31.8,307.666,35.4,324.612,39">
                                </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="365.03125" class="recharts-cartesian-axis-line" stroke="#666" fill="none" x1="15" y1="123" x2="380.03125" 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="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="70.41927083333333" y1="129" x2="70.41927083333333" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="121.25781249999999" y1="129" x2="121.25781249999999" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="172.09635416666666" y1="129" x2="172.09635416666666" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="222.93489583333334" y1="129" x2="222.93489583333334" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="273.7734375" y1="129" x2="273.7734375" y2="123">
                                        </line>
                                    </g>
                                    <g class="recharts-layer recharts-cartesian-axis-tick">
                                        <line angle="0" height="30" orientation="bottom" x="15" y="123" width="365.03125" class="recharts-cartesian-axis-tick-line" stroke="#666" fill="none" x1="324.61197916666663" y1="129" x2="324.61197916666663" 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-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="70.41927083333333" cy="87.60000000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="121.25781249999999" cy="70.92" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="172.09635416666666" cy="39.18000000000001" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="222.93489583333334" cy="34.2" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="273.7734375" cy="31.799999999999997" class="recharts-dot recharts-line-dot">
                            </circle>
                            <circle r="3" stroke-width="1" stroke="#30b4c0 " fill="#fff" height="108" width="365.03125" cx="324.61197916666663" cy="39" 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="365.03125" stroke="none" x="70.41927083333333" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="70.41927083333333" dy="0.71em">Page A</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="121.25781249999999" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="121.25781249999999" dy="0.71em">Page B</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="172.09635416666666" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="172.09635416666666" dy="0.71em">Page C</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="222.93489583333334" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="222.93489583333334" dy="0.71em">Page D</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="273.7734375" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="273.7734375" dy="0.71em">Page E</tspan>
                                </text>
                            </g>
                            <g class="recharts-layer recharts-cartesian-axis-tick-label">
                                <text height="30" orientation="bottom" width="365.03125" stroke="none" x="324.61197916666663" y="131" class="recharts-text recharts-cartesian-axis-tick-value" text-anchor="middle" fill="#666">
                                    <tspan x="324.61197916666663" dy="0.71em">Page F</tspan>
                                </text>
                            </g>
                        </g>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</div>
```

#### Props: ComposedChart

### ComposedChart

| 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. |
| areas | Array of Area | [] | Renders the provided Area components. |
| lines | Array of Line | [] | Renders the provided Line components. |
| bars | Array of Bar | [] | Renders the provided Bar components. |
| ... |  | — | Additional props are passed to the underlying ComposedChart component. Details can be found here: https://recharts.org/en-US/api/ComposedChart |