Source: https://app-studio-6167b.web.app/docs/Chart

@app-studio/components

# Chart

A comprehensive charting component for visualizing data in various formats including bar, line, area, pie, and donut charts.

[View component source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart.tsx)

## Import

```ts
import { Chart } from '@app-studio/components';
```

New to the library? Complete [installation and provider setup](https://app-studio-6167b.web.app/docs/installation) first.

## Interactive examples

Try the component, then open Code to copy the complete example.

```jsx
import React from 'react';
import { Chart } from '@app-studio/components';
import { View } from 'app-studio';
import { CHART_COLORS } from '@app-studio/components';

export const AreaChartDemo = () => {
  const data = {
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    series: [
      {
        name: 'This Week',
        data: [10, 15, 12, 20, 18, 25, 22],
        color: CHART_COLORS.blue,
      },
      {
        name: 'Last Week',
        data: [8, 12, 10, 15, 14, 20, 17],
        color: CHART_COLORS.green,
      },
      {
        name: 'Two Weeks Ago',
        data: [6, 10, 8, 12, 10, 16, 14],
        color: CHART_COLORS.purple,
      },
    ],
  };

  return (
    <View height="300px" width="100%">
      <Chart
        type="area"
        data={data}
        title="Weekly Performance"
        showGrid
        animated
      />
    </View>
  );
};
```

## Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

**Chart**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `type` Required | `"area" \| "line" \| "bar" \| "pie" \| "donut"` `"area"``"line"``"bar"``"pie"``"donut"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L11) |
| `data` | `ChartData` | `—` | Data to render.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L13) |
| `dataPoints` | `ChartDataPoint[]` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L15) |
| `title` | `string` | `—` | Main title displayed by the component.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L17) |
| `showLegend` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L19) |
| `legendPosition` | `"bottom" \| "left" \| "right" \| "top"` `"bottom"``"left"``"right"``"top"` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L21) |
| `showGrid` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L23) |
| `showTooltips` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L25) |
| `animated` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L27) |
| `animationDuration` | `number` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L29) |
| `responsive` | `boolean` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L31) |
| `aspectRatio` | `number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021. **Syntax**: `auto \|\| <ratio>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :-: \| \| **88** \| **89** \| **15** \| **88** \| No \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L33) |
| `width` | `string \| number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L35) |
| `height` | `string \| number` | `—` | This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. **Syntax**: `auto \| <length-percentage [0,∞]> \| min-content \| max-content \| fit-content \| fit-content(<length-percentage [0,∞]>) \| <calc-size()> \| <anchor-size()>` **Initial value**: `auto` \| Chrome \| Firefox \| Safari \| Edge \| IE \| \| :----: \| :-----: \| :----: \| :----: \| :---: \| \| **1** \| **1** \| **1** \| **12** \| **4** \|[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L37) |
| `views` | `ChartStyles` | `—` | Style overrides for the named internal parts.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L39) |
| `onDataPointClick` | `((dataPoint: ChartDataPoint \| null, index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L41) |
| `onSeriesClick` | `((seriesName: string, index: number) => void)` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L43) |
| `isLoading` | `boolean` | `—` | Displays the loading state.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L45) |
| `error` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | Validation error displayed for the field.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L47) |
| `noData` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L49) |
| `loadingIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L51) |
| `errorIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L53) |
| `noDataIndicator` | View type `string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| Promise<string \| number \| bigint \| boolean \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactPortal \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactElement<unknown, string \| import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").JSXElementConstructor<any>> \| Iterable<import("/Volumes/workspace/open-source/app-studio-components/node_modules/@types/react/index").ReactNode> \| null \| undefined> \| null` | `—` | See the type and source declaration for this property.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L55) |
| `aria-label` | `string` | `—` | Defines a string value that labels the current element.[Source](https://github.com/rize-network/app-studio-components/blob/main/src/components/Chart/Chart/Chart.props.ts#L57) |

Common inherited styling props (7)

**Chart inherited**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `onClick` | `any` | `—` | Called when the user activates the component. |
| `media` | `Record<string, CssProps>` | `—` | See the type and source declaration for this property. |
| `as` | `keyof JSX.IntrinsicElements` `"symbol"``"object"``"slot"``"style"``"title"``"pattern"``"form"``"animate"``"clipPath"``"filter"``"marker"``"mask"``"a"``"abbr"``"address"``"area"``"article"``"aside"``"audio"``"b"``"base"``"bdi"``"bdo"``"big"``"blockquote"``"body"``"br"``"button"``"canvas"``"caption"``"center"``"cite"``"code"``"col"``"colgroup"``"data"``"datalist"``"dd"``"del"``"details"``"dfn"``"dialog"``"div"``"dl"``"dt"``"em"``"embed"``"fieldset"``"figcaption"``"figure"``"footer"``"h1"``"h2"``"h3"``"h4"``"h5"``"h6"``"head"``"header"``"hgroup"``"hr"``"html"``"i"``"iframe"``"img"``"input"``"ins"``"kbd"``"keygen"``"label"``"legend"``"li"``"link"``"main"``"map"``"mark"``"menu"``"menuitem"``"meta"``"meter"``"nav"``"noindex"``"noscript"``"ol"``"optgroup"``"option"``"output"``"p"``"param"``"picture"``"pre"``"progress"``"q"``"rp"``"rt"``"ruby"``"s"``"samp"``"search"``"script"``"section"``"select"``"small"``"source"``"span"``"strong"``"sub"``"summary"``"sup"``"table"``"template"``"tbody"``"td"``"textarea"``"tfoot"``"th"``"thead"``"time"``"tr"``"track"``"u"``"ul"``"var"``"video"``"wbr"``"webview"``"svg"``"animateMotion"``"animateTransform"``"circle"``"defs"``"desc"``"ellipse"``"feBlend"``"feColorMatrix"``"feComponentTransfer"``"feComposite"``"feConvolveMatrix"``"feDiffuseLighting"``"feDisplacementMap"``"feDistantLight"``"feDropShadow"``"feFlood"``"feFuncA"``"feFuncB"``"feFuncG"``"feFuncR"``"feGaussianBlur"``"feImage"``"feMerge"``"feMergeNode"``"feMorphology"``"feOffset"``"fePointLight"``"feSpecularLighting"``"feSpotLight"``"feTile"``"feTurbulence"``"foreignObject"``"g"``"image"``"line"``"linearGradient"``"metadata"``"mpath"``"path"``"polygon"``"polyline"``"radialGradient"``"rect"``"set"``"stop"``"switch"``"text"``"textPath"``"tspan"``"use"``"view"` | `—` | See the type and source declaration for this property. |
| `themeMode` | `"light" \| "dark"` `"light"``"dark"` | `—` | See the type and source declaration for this property. |
| `_hover` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_active` | `string \| CssProps` | `—` | See the type and source declaration for this property. |
| `_focus` | `string \| CssProps` | `—` | See the type and source declaration for this property. |

For shared layout, color, and responsive properties, read [Styling & composition](https://app-studio-6167b.web.app/docs/styling) and [Responsive layouts](https://app-studio-6167b.web.app/docs/responsive). Additional native element attributes depend on the target platform.

## Usage guidance

- Give controls a visible label or an accessible name, and verify keyboard interaction. See [Accessibility](https://app-studio-6167b.web.app/docs/accessibility).
- For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
- These previews run in the browser. Check [React Native setup](https://app-studio-6167b.web.app/docs/react-native) for platform requirements and differences.