# Components: Chart

> Data-driven clusters of bars.

Glider documentation · Building Graphics · Web page: https://cgglider.com/docs/components/chart/

Sections of this page: [Overview](https://cgglider.com/docs/components.md) · [Text](https://cgglider.com/docs/components/text.md) · [Bar & Rectangle](https://cgglider.com/docs/components/shapes.md) · [Shaping plates](https://cgglider.com/docs/components/shape-editor.md) · [Chart](https://cgglider.com/docs/components/chart.md) · [Button](https://cgglider.com/docs/components/button.md)

A chart takes the same data shape as a bar but paints a labelled row per item: [{label, value, color?}]. Point it at a store path, or paste JSON into the inspector's JSON field.

| Setting | Options |
| --- | --- |
| Names / Values | Show or hide the label and the number. |
| Sort | None · Low → high · High → low. |
| Format | Auto · Number · Percent, with decimal places. |
| Prefix / Suffix | Text wrapped around the value. |
| Fill / Track / Label / Value colours | Per-role colours; a datum's own colour wins for its bar. |
| Label width / Value width | Fixed gutters so rows line up. |

Items without a label are numbered Item 1, Item 2, … and a default six-colour palette is used when no colours are given.

![The chart inspector.](https://cgglider.com/docs-shots/component-chart.png)