SparklineInteractiveHeader (Deprecated)

@coinbase/cds-web-visualization@3.4.0-beta.9

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

󰣸

Sparkline components are deprecated. Please use LineChart instead.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• SparklineInteractive,
• LineChart

---

󰏖

View as Markdown

󰔂

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

Loading...

󰙡

Live Code

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

Fill

The fill will be added by default

Loading...

󰙡

Live Code

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

Compact

Loading...

󰙡

Live Code

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

Custom Label

Loading...

󰙡

Live Code

<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>