SparklineInteractive (Deprecated)

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

The SparklineInteractive is used to display a Sparkline that has multiple time periods

󰣸

Sparkline components are deprecated. Please use LineChart instead.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• SparklineInteractiveHeader,
• LineChart

---

󰏖

View as Markdown

Default usage

Loading...

󰙡

Live Code

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

Fill Type

The fill will be added by default with a gradient style. You can set fillType="dotted" to get a dotted gradient fill.

Loading...

󰙡

Live Code

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

Compact

Loading...

󰙡

Live Code

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

Hide period selector

Loading...

󰙡

Live Code

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

Scaling Factor

The scaling factor is usually used when you want to show less variance in the chart. An example of this is a stable coin that doesn't change price by more than a few cents.

Loading...

󰙡

Live Code

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

With header

Loading...

󰙡

Live Code

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

Custom hover data

Loading...

󰙡

Live Code

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

Period selector placement

periodSelectorPlacement can be used to place the period selector in different positions (above or below).

Loading...

󰙡

Live Code

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

Custom styles

You can also provide custom styles, such as to remove any horizontal padding from the header.

Loading...

󰙡

Live Code

<Box padding={3} width="100%">
  <SparklineInteractivePriceWithHeader
    data={sparklineInteractiveData}
    fill
    strokeColor="#F7931A"
    styles={{ header: { paddingLeft: 0, paddingRight: 0 } }}
  />
</Box>