# SparklineInteractiveHeader

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

## Import

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

## Examples

### Default usage

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

### Fill

The fill will be added by default

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

### Compact

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

### Custom Label

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


