> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# Mekko()

- Package: [@gooddata/sdk-ui-charts](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/index.md)
- Kind: function
- Stability: beta
- Source: https://github.com/gooddata/gooddata-ui-sdk/blob/rel/11.64/libs/sdk-ui-charts/src/charts/mekko/Mekko.tsx
- Guides: [Mekko chart](https://www.gooddata.ai/docs/gooddata-ui/latest/visualisations/mekko-chart/index.md)

> **Beta API.** Mostly stable, but details may change in a minor release, outside SemVer. See [API maturity](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/platform/api-maturity/index.md).
> 

Mekko (Marimekko) chart shows data as stacked columns whose widths are proportional to a measure.

**Signature:**

```typescript
export declare function Mekko(props: IMekkoProps): import("react/jsx-runtime").JSX.Element;
```

## Parameters

| Parameter | Type | Description |
| --- | --- | --- |
| props | [IMekkoProps](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-charts/sdk-ui-charts.imekkoprops/index.md) |  |

**Returns:**

import("react/jsx-runtime").JSX.Element

## Remarks

Each column's width is driven by the width measure, its height by the height measure, columns are created from the view-by attribute, and segments come from the stack-by attribute.