Sparkline (Deprecated)

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

A small line chart component for displaying data trends.

󰣸

Sparkline components are deprecated. Please use LineChart instead.

Import

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

SourceView source codeStorybookView StorybookFigmaView Figma (internal only)

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• SparklineGradient,
• LineChart

---

󰏖

View as Markdown

Basic Example

The global warning banner is used to communicate important alerts or warnings to users across the entire platform, ensuring universal visibility and building trust.

Loading...

󰙡

Live Code

function Example() {
  const dimensions = { width: 64, height: 20 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <ListCell
      media={<CellMedia type="image" source={assets.btc.imageUrl} title="BTC" />}
      intermediary={<Sparkline {...dimensions} path={path} color={assets.btc.color} />}
      title={assets.btc.name}
      description={assets.btc.symbol}
      detail={prices[0]}
      subdetail="+4.55%"
      variant="positive"
      onClick={() => console.log('clicked')}
    />
  );
}

Dynamic path colors

Loading...

󰙡

Live Code

function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((color) => (
        <Sparkline key={color} {...dimensions} path={path} color={color} />
      ))}
    </VStack>
  );
}

Dynamic background colors

Loading...

󰙡

Live Code

function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((background) => (
        <VStack key={background} dangerouslySetBackground={background}>
          <Sparkline {...dimensions} path={path} background={background} color="auto" />
        </VStack>
      ))}
    </VStack>
  );
}

y axis scaling

Loading...

󰙡

Live Code

function Example() {
  const yAxisScalingFactor = 0.2;
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices, yAxisScalingFactor });
  return (
    <VStack gap={2}>
      <Text as="p" font="label1">
        Scale {yAxisScalingFactor}
      </Text>
      <Sparkline {...dimensions} path={path} color="auto" yAxisScalingFactor={yAxisScalingFactor} />
    </VStack>
  );
}

Sparkline fill

Loading...

󰙡

Live Code

function Example() {
  const dimensions = { width: 400, height: 200 };
  const path = useSparklinePath({ ...dimensions, data: prices });
  const area = useSparklineArea({ ...dimensions, data: prices });
  return (
    <VStack gap={2}>
      {assetColors.map((color) => (
        <Sparkline key={color} {...dimensions} path={path} color={color}>
          <SparklineArea area={area} />
        </Sparkline>
      ))}
    </VStack>
  );
}