## Feature Examples

### Structure
- description: Pass the points with `data` prop, an array of objects with a `label` date and a numeric `value`, sorted by date. The chart draws a smooth line through the points and shades the area below it. It has no axes or labels, so the surrounding text has to explain what the metric is.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 320 },
    { label: new Date('Sep 8, 2026'), value: 410 },
    { label: new Date('Sep 9, 2026'), value: 380 },
    { label: new Date('Sep 10, 2026'), value: 460 },
    { label: new Date('Sep 11, 2026'), value: 520 },
    { label: new Date('Sep 12, 2026'), value: 490 },
    { label: new Date('Sep 13, 2026'), value: 560 },
  ];

  return <SparklineChart data={data} />;
};
```

### Tooltip
- description: Show a tooltip for the hovered point with `getTooltipContent` prop. It receives the index of the point nearest the pointer and returns the tooltip content, either text or JSX. A dot marks the point on the line. Without this prop, hovering the chart shows nothing.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 1240 },
    { label: new Date('Sep 8, 2026'), value: 1580 },
    { label: new Date('Sep 9, 2026'), value: 1410 },
    { label: new Date('Sep 10, 2026'), value: 1930 },
    { label: new Date('Sep 11, 2026'), value: 1760 },
    { label: new Date('Sep 12, 2026'), value: 2120 },
    { label: new Date('Sep 13, 2026'), value: 2050 },
  ];
  const formatDate = (date) =>
    date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

  return (
    <SparklineChart
      data={data}
      width={320}
      height={64}
      getTooltipContent={(index) =>
        `${data[index].value.toLocaleString('en-US')} visitors on ${formatDate(
          data[index].label,
        )}`
      }
    />
  );
};
```

### Hover callback
- description: React to hovering with `onHover` prop. It is called with the index of the point nearest the pointer each time that point changes, for example to show the hovered value outside the chart. It isn't called when the pointer leaves the chart, so choose what the surrounding content shows by default.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 1240 },
    { label: new Date('Sep 8, 2026'), value: 1580 },
    { label: new Date('Sep 9, 2026'), value: 1410 },
    { label: new Date('Sep 10, 2026'), value: 1930 },
    { label: new Date('Sep 11, 2026'), value: 1760 },
    { label: new Date('Sep 12, 2026'), value: 2120 },
    { label: new Date('Sep 13, 2026'), value: 2050 },
  ];
  const [hoveredIndex, setHoveredIndex] = React.useState(data.length - 1);
  const point = data[hoveredIndex];
  const formatDate = (date) =>
    date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

  return (
    <Box direction="vertical" gap="SP2">
      <Text>
        {point.value.toLocaleString('en-US')} visitors on{' '}
        {formatDate(point.label)}
      </Text>
      <SparklineChart
        data={data}
        width={320}
        height={64}
        onHover={setHoveredIndex}
      />
    </Box>
  );
};
```

### Highlighted area
- description: Highlight part of the line with `highlightedStartingIndex` and `highlightedEndingIndex` props. Points between the two indices keep the chart color and the area shading, and the rest of the line turns grey. By default the whole line is highlighted. Use it to point out a period, such as the selected date range or the days since a campaign started.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 1520 },
    { label: new Date('Sep 8, 2026'), value: 1780 },
    { label: new Date('Sep 9, 2026'), value: 1640 },
    { label: new Date('Sep 10, 2026'), value: 1910 },
    { label: new Date('Sep 11, 2026'), value: 1720 },
    { label: new Date('Sep 12, 2026'), value: 2050 },
    { label: new Date('Sep 13, 2026'), value: 1860 },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <SparklineChart data={data} width={320} height={64} />
      <SparklineChart
        data={data}
        width={320}
        height={64}
        highlightedStartingIndex={4}
        highlightedEndingIndex={6}
      />
    </StorybookComponents.Stack>
  );
};
```

### Color
- description: Change the line and area color with `color` prop. Pass a hex color code. By default the chart uses the standard blue. Use color to reflect the meaning of the metric, for example green for growth and red for a decline, and keep it consistent across charts on the same screen.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 320 },
    { label: new Date('Sep 8, 2026'), value: 410 },
    { label: new Date('Sep 9, 2026'), value: 380 },
    { label: new Date('Sep 10, 2026'), value: 460 },
    { label: new Date('Sep 11, 2026'), value: 520 },
    { label: new Date('Sep 12, 2026'), value: 490 },
    { label: new Date('Sep 13, 2026'), value: 560 },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <SparklineChart data={data} width={320} height={64} />
      <SparklineChart data={data} width={320} height={64} color="#25A55A" />
      <SparklineChart data={data} width={320} height={64} color="#E62214" />
    </StorybookComponents.Stack>
  );
};
```

### Size
- description: Set the size in pixels with `width` and `height` props. The default is 200 by 40 pixels. The chart doesn't stretch to fill its container, so match the size to the space in the layout, for example the height of the value it sits next to.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 320 },
    { label: new Date('Sep 8, 2026'), value: 410 },
    { label: new Date('Sep 9, 2026'), value: 380 },
    { label: new Date('Sep 10, 2026'), value: 460 },
    { label: new Date('Sep 11, 2026'), value: 520 },
    { label: new Date('Sep 12, 2026'), value: 490 },
    { label: new Date('Sep 13, 2026'), value: 560 },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <SparklineChart data={data} />
      <SparklineChart data={data} width={320} height={64} />
      <SparklineChart data={data} width={480} height={96} />
    </StorybookComponents.Stack>
  );
};
```

### Animation
- description: The line animates from a flat baseline to its values when the chart mounts and again whenever `data` changes. Control the duration in milliseconds with `animationDuration` prop. The default is 300. Set it to 0 to turn the animation off, for example in dense lists that render many charts at once.
- example:
```jsx
() => {
  const thisWeek = [
    { label: new Date('Sep 7, 2026'), value: 1520 },
    { label: new Date('Sep 8, 2026'), value: 1780 },
    { label: new Date('Sep 9, 2026'), value: 1640 },
    { label: new Date('Sep 10, 2026'), value: 1910 },
    { label: new Date('Sep 11, 2026'), value: 1720 },
    { label: new Date('Sep 12, 2026'), value: 2050 },
    { label: new Date('Sep 13, 2026'), value: 1860 },
  ];
  const lastWeek = [
    { label: new Date('Aug 31, 2026'), value: 1980 },
    { label: new Date('Sep 1, 2026'), value: 1720 },
    { label: new Date('Sep 2, 2026'), value: 1840 },
    { label: new Date('Sep 3, 2026'), value: 1590 },
    { label: new Date('Sep 4, 2026'), value: 1460 },
    { label: new Date('Sep 5, 2026'), value: 1680 },
    { label: new Date('Sep 6, 2026'), value: 1410 },
  ];
  const [showLastWeek, setShowLastWeek] = React.useState(false);

  return (
    <Box direction="vertical" gap="SP3">
      <SparklineChart
        data={showLastWeek ? lastWeek : thisWeek}
        width={320}
        height={64}
        animationDuration={800}
      />
      <Box>
        <Button
          size="small"
          priority="secondary"
          onClick={() => setShowLastWeek(!showLastWeek)}
        >
          {showLastWeek ? 'Show this week' : 'Show last week'}
        </Button>
      </Box>
    </Box>
  );
};
```

## Common Use Case Examples

### Metric card
- description: Place a sparkline next to a key figure in a summary card to show the recent trend behind the number. Pair the value with a `<TrendIndicator/>` for the change and keep the tooltip for exact daily figures. For the standard analytics layout, `<AnalyticsSummaryCard/>` provides this composition out of the box.
- example:
```jsx
() => {
  const data = [
    { label: new Date('Sep 7, 2026'), value: 1520 },
    { label: new Date('Sep 8, 2026'), value: 1780 },
    { label: new Date('Sep 9, 2026'), value: 1640 },
    { label: new Date('Sep 10, 2026'), value: 1910 },
    { label: new Date('Sep 11, 2026'), value: 1720 },
    { label: new Date('Sep 12, 2026'), value: 2050 },
    { label: new Date('Sep 13, 2026'), value: 1860 },
  ];
  const formatDate = (date) =>
    date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });

  return (
    <Layout>
      <Cell span={6}>
        <Card>
          <Card.Content>
            <Box align="space-between" verticalAlign="middle" gap="SP4">
              <Box direction="vertical" gap="SP1">
                <Text size="small" secondary>
                  Total sales
                </Text>
                <Box verticalAlign="middle" gap="SP2">
                  <Heading size="medium">$12,480</Heading>
                  <TrendIndicator value={8.3} />
                </Box>
                <Text size="tiny" secondary>
                  Last 7 days
                </Text>
              </Box>
              <SparklineChart
                data={data}
                width={160}
                height={48}
                getTooltipContent={(index) =>
                  `$${data[index].value.toLocaleString('en-US')} on ${formatDate(
                    data[index].label,
                  )}`
                }
              />
            </Box>
          </Card.Content>
        </Card>
      </Cell>
    </Layout>
  );
};
```