# Animated chart row

Stable labels and changing values move with an animated chart bar.

Source: https://legend.so/slides/effects/bar-row/

Legend Slides: Preview.

[← All effects](https://legend.so/slides/effects/)![Animated chart row in Legend Slides](https://legend.so/slides/effects/previews/bar-row/2c5b171a79ed2430561f76a2b14f6a23138bbca92d0341ac9f70f0abb152b29a.png)

Still captured in Legend Slides for macOS (development build).

[Install in Slides](legend-slides://effects/install?pack=charts&version=1.0.0)[Open example in Slides](legend-slides://effects/example?effect=bar-row)[Download example](https://legend.so/slides/effects/examples/bar-row/aa7f9f707f4e738b0ffd2e316488cdef7b3c972fefebf6bae5b2e10bb5e639d7.mdx)

Requires a Legend Slides build with effect installation support. Installs the charts pack (1.0.0, 9 KB source) and its dependencies. macOS host capabilities: reanimated, skia. Installed decks work offline.

## Use it in a deck

```mdx
---
title: Animated chart row
---

import { View, Text } from "react-native";
import { BarRow } from "slides:charts/BarRow";


# Animated chart row

<View style={{ width: 1696, height: 650 }}>
<Steps count={2}>{step => <BarRow id="sample-row" name="Requests" value={step ? 82 : 38} maximum={100} y={180} highlighted animateValue valueLabel="requests" />}</Steps>
</View>
```

## Configure

**id**

Unique shared-element ID within the deck.

**value / maximum**

Caller-owned data and scale.

**layout**

Override label, bar and row geometry.

Only imported effects enter the compiled deck. [Installation and versioning →](https://legend.so/slides/effects/installation/)

[View Markdown](https://legend.so/slides/effects/bar-row.md)[Report a documentation correction](https://github.com/LegendApp/legend-docs/issues/new?title=Docs%3A+Animated+chart+row&body=Page%3A+https%3A%2F%2Flegend.so%2Fslides%2Feffects%2Fbar-row%0A%0AWhat+is+incorrect+or+missing%3F%0A%0AExpected+behavior+or+supporting+source%3A%0A)