GridLines

Soft background lines; the zero line, when visible, is a little stronger.

Import

import { GridLines } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/core.

Usage

export const Default: Story = {
  render: () => <AxesDemo title="Ventas" rightTitle="Cortes" showRight={false} showGrid />,
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
ticks *	readonly AxisTick[]
direction *	"horizontal" | "vertical"		Lines across the plot: horizontal for a vertical value axis.
length *	number		Plot width (horizontal lines) or height (vertical lines).
zero	number		Position of the zero line, drawn stronger.

* marks a required prop.

Storybook stories

• Default
• Dual Axis
• Without Grid
• Default
• Stacked
• Horizontal
• Columns And Line On Right Axis
• Area With Goal
• With Brush
• Loading
• Empty
• Default
• Default
• Root Only
• Interactive
• Default
• Full Range
• Default
• Missing Values
• Default
• Fills Parent
• Aspect Ratio
• With Legend And Table
• Loading
• Loading Ring
• Empty
• Read Only
• Toggleable
• Centered
• Bars
• Line
• Ring
• Empty
• Default
• Flips Near The Right Edge
• Without Title
• Default
• Spanish
• Default
• At Root
• Default
• Drilled In
• Limited
• Leaf
• Default
• From Branch
• Gallery
• Custom Tile
• Default
• Vertical Keys
• Both Axes Keys
• Default
• Fills Up
• Scissors
• Without Track

Source

packages/ui/src/charts/core/axes.tsx