# 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" />
        <TextTitle3 as="span">CustomHeader</TextTitle3>
      </HStack>
    }
  />
</Box>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `percent` | `string` | Yes | `-` | Free form percentage change |
| `sign` | ` \| positive \| negative \| upwardTrend \| downwardTrend` | Yes | `-` | Sign to denote the change in price |
| `variant` | `positive \| negative \| foregroundMuted` | Yes | `-` | The variant to use for the price and percentage change |
| `accessibilityLabel` | `string` | No | `-` | The accessibilityLabel to show for the price and / or percentage change. This should be localized |
| `accessoryText` | `string` | No | `-` | The accessoryText to show after the price and / or percentage change. An example is All time |
| `priceChange` | `string` | No | `-` | Show the dollar amount of price change |