AxisLeft

Value labels on the left, right-aligned against the plot.

Import

import { AxisLeft } 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[]
offset *	number		Offset of the axis line: y for bottom, x for left/right.
title	string
color	string		Overrides the label color (a value axis matched to its series).
rotate	number		Tilts the labels by this many degrees (negative reads up and to the right), e.g. -45.

* 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