Gridline

Background grid patterns for charts. Supports dashed lines in x/y/both directions and alternating stripe fills.

Import

import { GridlineSeries, Gridline, GridStripe } from 'reaviz';

GridlineSeries Props

Gridline Props

GridStripe Props

Default Gridlines

// Already included by default in most charts
<AreaChart data={data} gridlines={<GridlineSeries />} />

Horizontal Lines Only

<GridlineSeries line={<Gridline direction="y" />} />

Vertical Lines Only

<GridlineSeries line={<Gridline direction="x" />} />

Custom Color and Style

<GridlineSeries
  line={
    <Gridline
      direction="all"
      strokeColor="rgba(255, 255, 255, 0.1)"
      strokeDasharray="5 10"
      strokeWidth={0.5}
    />
  }
/>

Striped Background

<GridlineSeries
  line={<Gridline direction="y" />}
  stripe={<GridStripe fill="rgba(255, 255, 255, 0.03)" />}
/>

No Gridlines

<AreaChart data={data} gridlines={null} />