Scrubber

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

Import

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

SourceView source code

---

Related components

• AreaChart,
• CartesianChart,
• LineChart

Basic Example

Scrubber can be used to provide horizontal interaction with a chart. As your mouse hovers over the chart, you will see a reference line and scrubber head following your cursor.

Loading...

󰙡

Live Code

<LineChart
  enableScrubbing
  height={250}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
    },
  ]}
  curve="monotone"
  showYAxis
  showArea
  yAxis={{
    showGrid: true,
  }}
>
  <Scrubber />
</LineChart>

Multiple Series

All series will be scrubbed by default. You can set the seriesIds prop to restrict the scrubbing to specific series.

Loading...

󰙡

Live Code

<LineChart
  enableScrubbing
  height={400}
  series={[
    {
      id: 'top',
      data: [15, 28, 32, 44, 46, 36, 40, 45, 48, 38],
    },
    {
      id: 'upperMiddle',
      data: [12, 23, 21, 29, 34, 28, 31, 38, 42, 35],
      color: '#ef4444',
      type: 'dotted',
    },
    {
      id: 'lowerMiddle',
      data: [8, 15, 14, 25, 20, 18, 22, 28, 24, 30],
      color: '#f59e0b',
      curve: 'natural',
      LineComponent: (props) => (
        <GradientLine {...props} endColor="#F7931A" startColor="#E3D74D" strokeWidth={4} />
      ),
    },
    {
      id: 'bottom',
      data: [4, 8, 11, 15, 16, 14, 16, 10, 12, 14],
      color: '#800080',
      curve: 'step',
      AreaComponent: DottedArea,
      showArea: true,
    },
  ]}
>
  <Scrubber seriesIds={['top', 'lowerMiddle']} />
</LineChart>

Labels

Setting the label prop for a series will display a label above the scrubber head.

Loading...

󰙡

Live Code

<LineChart
  enableScrubbing
  height={250}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
      label: 'Price',
    },
  ]}
  curve="monotone"
  showArea
>
  <Scrubber />
</LineChart>

Pulsing

Setting the pulse prop will cause the scrubber heads to pulse when the user is not actively scrubbing.

Loading...

󰙡

Live Code

<LineChart
  enableScrubbing
  height={250}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
    },
  ]}
  curve="monotone"
  showArea
>
  <Scrubber pulse />
</LineChart>

With Imperative Handle

You can also use the imperative handle to pulse the scrubber heads programmatically.

Loading...

󰙡

Live Code

function ImperativeHandle() {
  const scrubberRef = useRef(null);
  return (
    <VStack gap={2}>
      <LineChart
        enableScrubbing
        height={400}
        series={[
          {
            id: 'priceA',
            data: [2400, 1398, 9800, 3908, 4800, 3800, 4300],
            label: 'Page Views',
            color: 'var(--color-accentBoldBlue)',
            curve: 'natural',
          },
          {
            id: 'priceB',
            data: [2000, 2491, 4501, 6049, 5019, 4930, 5910],
            label: 'Unique Visitors G',
            color: 'var(--color-accentBoldGreen)',
            curve: 'natural',
          },
          {
            id: 'priceC',
            data: [1000, 4910, 2300, 5910, 3940, 2940, 1940],
            label: 'Unique Visitors P',
            color: 'var(--color-accentBoldPurple)',
            curve: 'natural',
          },
          {
            id: 'priceD',
            data: [4810, 2030, 5810, 3940, 2940, 1940, 940],
            label: 'Unique Visitors Y',
            color: 'var(--color-accentBoldYellow)',
            curve: 'natural',
          },
        ]}
        xAxis={{
          range: ({ min, max }) => ({ min, max: max - 32 }),
        }}
        showYAxis
        yAxis={{
          domain: {
            min: 0,
          },
          showGrid: true,
          tickLabelFormatter: (value) => value.toLocaleString(),
        }}
      >
        <Scrubber ref={scrubberRef} />
      </LineChart>
      <Button onClick={() => scrubberRef.current?.pulse()}>Pulse</Button>
    </VStack>
  );
}

Disable Overlay When Scrubbing

By default, the scrubber will show an overlay to de-emphasize future data. You can hide this by setting the hideOverlay prop to true.

Loading...

󰙡

Live Code

<LineChart
  enableScrubbing
  height={250}
  series={[
    {
      id: 'prices',
      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
    },
  ]}
  curve="monotone"
  showYAxis
  showArea
  yAxis={{
    showGrid: true,
  }}
>
  <Scrubber hideOverlay />
</LineChart>