# SparklineInteractiveHeader

The SparklineInteractiveHeader is used to display chart information that changes over time

## Import

```tsx
import { SparklineInteractiveHeader } from '@coinbase/cds-web-visualization'
```

## Examples

:::tip Accessibility tip
When possible combining content that is contextually related benefits screen reader users. The interactive header within Sparkline is one of these moments. Use an accessibilityLabel prop or aria-label to set the entire context of the interactive header. This way screen reader users will hear the asset name, price, and direction all in one sentence.
:::

### Default usage

```jsx live
<Box padding={3} width="100%">
  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} strokeColor="#F7931A" />
</Box>
```

### Fill

The fill will be added by default

```jsx live
<Box padding={3} width="100%">
  <SparklineInteractivePriceWithHeader data={sparklineInteractiveData} fill strokeColor="#F7931A" />
</Box>
```

### Compact

```jsx live
<Box padding={3} width="100%">
  <SparklineInteractivePriceWithHeader
    compact
    fill
    strokeColor="#F7931A"
    data={sparklineInteractiveData}
  />
</Box>
```

### Custom Label

```jsx live
<Box padding={3} width="100%">
  <SparklineInteractivePriceWithHeader
    data={sparklineInteractiveData}
    strokeColor="#F7931A"
    labelNode={
      <HStack gap={1} alignItems="center">
        <Icon active name="wallet" size="s" />
        <Text as="span" font="title3">
          CustomHeader
        </Text>
      </HStack>
    }
  />
</Box>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `defaultTitle` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | Yes | `-` | Default title, changing this prop has no effect once the default is rendered. If you use a ReactNode that is not a string, then you cannot use the text based label that supports updates. |
| `compact` | `boolean` | No | `-` | Reduce the font size used for the header itself. |
| `defaultLabel` | `string` | No | `-` | Default label, changing this prop has no effect once the default is rendered. |
| `defaultSubHead` | `SparklineInteractiveSubHead` | No | `-` | Default SubHead, changing this prop has no effect once the default is rendered. |
| `key` | `Key \| null` | No | `-` | - |
| `labelNode` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Adds a label node that allows React components. If you use this node then you cannot use the text based label that supports updates. |
| `ref` | `((instance: SparklineInteractiveHeaderRef \| null) => void) \| RefObject<SparklineInteractiveHeaderRef> \| null` | No | `-` | - |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |