The ValueAxis plugin visualizes the value axis.
Use the following statement to import the plugin:
import { ValueAxis } from '@devexpress/dx-react-chart-material-ui';
// import { ValueAxis } from '@devexpress/dx-react-chart-bootstrap4';If you want to use custom components, you can import the themeless plugin:
import { ValueAxis } from '@devexpress/dx-react-chart';| Name | Type | Default | Description |
|---|---|---|---|
| tickSize? | number | 5 | The tick size. |
| position? | 'bottom' | 'top' | 'left' | 'right' | 'left' | The axis position. |
| scaleName? | string | The scale name. | |
| indentFromAxis? | number | 10 | The indent from the axis. |
| tickFormat? | (scale: ScaleObject) => (tick: string) => string | A function that returns a tick formatter function. | |
| showTicks? | boolean | false | Specifies whether to render ticks. |
| showGrid? | boolean | true | Specifies whether to render the grid. |
| showLine? | boolean | false | Specifies whether to render the axis's line. |
| showLabels? | boolean | true | Specifies whether to render the axis's labels. |
| rootComponent | ComponentType<ValueAxis.RootProps> | A component that renders the axis root layout. | |
| tickComponent | ComponentType<ValueAxis.LineProps> | A component that renders a tick. | |
| labelComponent | ComponentType<ValueAxis.LabelProps> | A component that renders the axis label. | |
| lineComponent | ComponentType<ValueAxis.LineProps> | A component that renders the axis line. | |
| gridComponent | ComponentType<ValueAxis.LineProps> | A component that renders the grid. |
Describes properties passed to a component that renders the axis root layout.
| Field | Type | Description |
|---|---|---|
| x | number | The x coordinate of the top left corner of the axis' rendering area. |
| y | number | The y coordinate of the top left corner of the series' rendering area. |
| children | ReactNode | A React node used to render the axis. |
Describes properties passed to a component that renders the axis's line, ticks and grid.
| Field | Type | Description |
|---|---|---|
| x1 | number | The line start's x coordinate. |
| x2 | number | The line end's x coordinate. |
| y1 | number | The line start's y coordinate. |
| y2 | number | The line end's y coordinate. |
Describes properties passed to a component that renders the axis label.
| Field | Type | Description |
|---|---|---|
| text | string | number | The label text. |
| x | number | The x coordinate of the label's top left corner. |
| y | number | The y coordinate of the label's top left corner. |
| dy | string | The label's offset from the baseline in CSS units. |
| textAnchor | 'start' | 'middle' | 'end' | The label's text alignment. |
| Name | Properties | Description |
|---|---|---|
| ValueAxis.Root | ValueAxis.RootProps | A component that renders the axis root layout. |
| ValueAxis.Tick | ValueAxis.LineProps | A component that renders the tick. |
| ValueAxis.Label | ValueAxis.LabelProps | A component that renders the axis label. |
| ValueAxis.Line | ValueAxis.LineProps | A component that renders the axis line. |
| ValueAxis.Grid | ValueAxis.LineProps | A component that renders the grid. |