Axis
Some components are related to a specific axis of the chart. These include labels, ticks, grid lines and interactive elements like the tooltip and cursor. All these components need to be wrapped inside an Axis component. The Axis component is a wrapper that provides the necessary context for these components to function correctly.
API Reference Section titled API Reference
Context provider for axis components.
Props
| Property | Default | Type/Description |
|---|---|---|
| dataKey | - | string The key in the data object to use for this axis. Don't provide a key if the data is a simple array of numbers. |
| axisId | '0' | string The id of the axis. |
| type | - | ScaleType The scale type of the axis. |
| tickCount | - | number The count of axis ticks. |
| tickValues | - | any[] Force specific tick values. |
| axisRange | 'auto' | 'auto' | [number | 'min', number | 'max'] The range of the axis. Only used when type is set to 'linear'. |
type ScaleType = 'linear' | 'categorial'Guide line rendered when hovering over the chart to hightlight the closest tick.
Props
| Property | Default | Type/Description |
|---|---|---|
| No additional props. | ||
Data attributes
Data attributes present on <AxisCursor />
components.
| Property | Description |
|---|---|
| data-sc-axis-cursor | Present on every cursor line element. |
Lines displaying the axis ticks on the chart.
Props
| Property | Default | Type/Description |
|---|---|---|
| No additional props. | ||
Data attributes
Data attributes present on <AxisGrid />
components.
| Property | Description |
|---|---|
| data-sc-axis-grid-group | Present on every grid group element. |
| data-sc-axis-grid | Present on every grid line element. |
Axis label component.
Props
| Property | Default | Type/Description |
|---|---|---|
| format | - | (value: any) => string Optional function to format the label text. |
| interval | 'preserveEnd' | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd' | number The interval at which to show labels. |
| labelGap | 16px | number The minimum gap between labels. |
Data attributes
Data attributes present on <AxisLabel />
components.
| Property | Description |
|---|---|
| data-sc-axis-label-group | Present on every label group element. |
| data-sc-axis-label | Present on every label text element. |
Baseline for the axis.
Props
| Property | Default | Type/Description |
|---|---|---|
| No additional props. | ||
Data attributes
Data attributes present on <AxisLine />
components.
| Property | Description |
|---|---|
| data-sc-axis-line | Present on every axis line element. |
Mark lines rendered between the chart and axis labels.
Props
| Property | Default | Type/Description |
|---|---|---|
| length | 6px | number Length of the mark lines in px. |
Data attributes
Data attributes present on <AxisMark />
components.
| Property | Description |
|---|---|
| data-sc-axis-mark-group | Present on every mark group element. |
| data-sc-axis-mark | Present on every mark line element. |
Interactive tooltip component that renders near the closest tick.
Props
| Property | Default | Type/Description |
|---|---|---|
| tickGap | 16px | number The gap between the tick and the tooltip. |
| pointerGap | 16px | number The gap between the pointer and the tooltip. |
| children | - | (props: { data: any, }) => JSX.Element Accepts a function as it's children that receives the data of the closest tick. |
Data attributes
Data attributes present on <AxisTooltip />
components.
| Property | Description |
|---|---|
| data-sc-axis-tooltip | Present on every tooltip element. |
Line rendered at a specific value in the axis scale.
Props
| Property | Default | Type/Description |
|---|---|---|
| value | - | any The value in the axis scale to draw the line at. |
Data attributes
Data attributes present on <AxisValueLine />
components.
| Property | Description |
|---|---|
| data-sc-axis-value-line | Present on every value line element. |
v0.0.1
Developed and designed by Jasmin