## Feature Examples

### Data points
- description: Build the chart from the `data` prop, an array of points drawn from left to right in the order they are given. Each point has two properties: - `value` is the number plotted on the Y axis. - `label` is the short text shown under the point on the X axis. The chart stretches to the full width of its container.
- example:
```jsx
() => {
  const data = [
    { value: 1240, label: 'Mon' },
    { value: 1890, label: 'Tue' },
    { value: 1560, label: 'Wed' },
    { value: 2310, label: 'Thu' },
    { value: 2780, label: 'Fri' },
    { value: 3420, label: 'Sat' },
    { value: 2950, label: 'Sun' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="100%">
      <AreaChart data={data} />
    </StorybookComponents.Stack>
  );
};
```

### Tooltip
- description: Show details for the hovered point with `tooltipContent` prop. It's a function that receives the point and its index and returns the tooltip text: a single string for one line, or an array of strings for one line each. Without this prop, hovering over the chart shows no tooltip.
- example:
```jsx
() => {
  const data = [
    { value: 142, label: 'Sep 10' },
    { value: 98, label: 'Sep 11' },
    { value: 187, label: 'Sep 12' },
    { value: 121, label: 'Sep 13' },
    { value: 164, label: 'Sep 14' },
    { value: 233, label: 'Sep 15' },
    { value: 205, label: 'Sep 16' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="100%">
      <AreaChart
        data={data}
        tooltipContent={(item) => item.value + ' orders'}
      />
      <AreaChart
        data={data}
        tooltipContent={(item) => [item.label, item.value + ' orders']}
      />
    </StorybookComponents.Stack>
  );
};
```

### Tooltip callback
- description: React to the point a user hovers over with `onTooltipShow` prop. It's called with the hovered data item, so you can reflect the value elsewhere on the page.
- example:
```jsx
() => {
  const data = [
    { value: 3120, label: 'Sep 10' },
    { value: 2860, label: 'Sep 11' },
    { value: 3540, label: 'Sep 12' },
    { value: 4010, label: 'Sep 13' },
    { value: 3780, label: 'Sep 14' },
    { value: 4460, label: 'Sep 15' },
    { value: 4890, label: 'Sep 16' },
  ];
  const [hovered, setHovered] = React.useState(null);

  return (
    <Box direction="vertical" gap="SP2" width="100%">
      <Text size="small" secondary>
        {hovered
          ? hovered.label + ': ' + hovered.value.toLocaleString() + ' visitors'
          : 'Hover over the chart to see visitors per day'}
      </Text>
      <AreaChart
        data={data}
        tooltipContent={(item) => item.value.toLocaleString() + ' visitors'}
        onTooltipShow={setHovered}
      />
    </Box>
  );
};
```

### Y axis ticks
- description: Control how many value labels the Y axis may show with `maxYTicksLimit` prop. The default is 5. Values are shortened to compact numbers such as `2.5k`. Raise the limit when the chart has room for a finer scale, or lower it to keep a small chart uncluttered.
- example:
```jsx
() => {
  const data = [
    { value: 5697, label: 'Sep 10' },
    { value: 1170, label: 'Sep 11' },
    { value: 4678, label: 'Sep 12' },
    { value: 2030, label: 'Sep 13' },
    { value: 3000, label: 'Sep 14' },
    { value: 4120, label: 'Sep 15' },
    { value: 3684, label: 'Sep 16' },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column" width="100%">
      <AreaChart data={data} />
      <AreaChart data={data} maxYTicksLimit={10} />
    </StorybookComponents.Stack>
  );
};
```

### Collapsed labels
- description: When there are more points than labels that fit on the X axis, the chart hides some of the labels and keeps the spacing even. Every point stays interactive, so hovering between two visible labels still shows the tooltip for that point.
- example:
```jsx
() => {
  const dailyOrders = [
    1170, 2030, 1500, 1860, 2240, 1720, 1390, 2110, 2470, 1980, 1650, 2320,
    2590, 2050, 1740, 2410, 2680, 2150, 1830, 2520, 2760, 2290, 1910, 2630,
    2870, 2380, 2020, 2740, 2960, 2450,
  ];
  const data = dailyOrders.map((value, index) => ({
    value,
    label: 'Aug ' + (index + 1),
  }));

  return (
    <StorybookComponents.Stack flexDirection="column" width="100%">
      <AreaChart
        data={data}
        tooltipContent={(item) => [
          item.label,
          item.value.toLocaleString() + ' orders',
        ]}
      />
    </StorybookComponents.Stack>
  );
};
```

## Common Use Case Examples

### Sales overview
- description: Use an area chart inside a card with a title and a key figure to show how a metric such as sales developed over a period. The tooltip gives the exact value for each day.
- example:
```jsx
() => {
  const data = [
    { value: 5697, label: 'Sep 10' },
    { value: 1170, label: 'Sep 11' },
    { value: 4678, label: 'Sep 12' },
    { value: 2030, label: 'Sep 13' },
    { value: 3000, label: 'Sep 14' },
    { value: 4120, label: 'Sep 15' },
    { value: 3684, label: 'Sep 16' },
  ];

  return (
    <Card>
      <Card.Header title="Sales over time" subtitle="Sep 10 – Sep 16, 2026" />
      <Card.Divider />
      <Card.Content>
        <Box direction="vertical" gap="SP3">
          <Box direction="vertical">
            <Heading size="large">$24,379</Heading>
            <Text size="small" secondary>
              Total sales
            </Text>
          </Box>
          <AreaChart
            data={data}
            tooltipContent={(item) => [
              item.label,
              '$' + item.value.toLocaleString() + ' in sales',
            ]}
          />
        </Box>
      </Card.Content>
    </Card>
  );
};
```