The ArgumentAxis plugin visualizes the argument axis.
Use the following statement to import a plugin:
import { ArgumentAxis } from '@devexpress/dx-react-chart-material-ui';
// import { ArgumentAxis } from '@devexpress/dx-react-chart-bootstrap4';You can import the themeless plugin to use custom components:
import { ArgumentAxis } from '@devexpress/dx-react-chart';| Name | Type | Default | Description |
|---|---|---|---|
| tickSize? | number | 5 | The tick size. |
| position? | 'bottom' | 'top' | 'left' | 'right' | 'bottom' | The axis position. |
| indentFromAxis? | number | 10 | The indent from the axis. |
| tickFormat? | (scale: ScaleObject) => (tick: string) => string | A function that returns a tick formatter function. | |
| showTicks? | boolean | true | Specifies whether to render ticks. |
| showGrid? | boolean | false | Specifies whether to render the grid. |
| showLine? | boolean | true | Specifies whether to render the axis's line. |
| showLabels? | boolean | true | Specifies whether to render the axis's labels. |
| rootComponent | ComponentType<ArgumentAxis.RootProps> | A component that renders the axis's root layout. | |
| tickComponent | ComponentType<ArgumentAxis.LineProps> | A component that renders a tick. | |
| labelComponent | ComponentType<ArgumentAxis.LabelProps> | A component that renders the axis's label. | |
| lineComponent | ComponentType<ArgumentAxis.LineProps> | A component that renders the axis's line. | |
| gridComponent | ComponentType<ArgumentAxis.LineProps> | A component that renders the grid. |
Describes properties passed to a component that renders the axis's root layout.
| Field | Type | Description |
|---|---|---|
| x | number | The x coordinate of the top left corner of the axis's 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 x coordinate of the line's start. |
| x2 | number | The x coordinate of the line's end. |
| y1 | number | The y coordinate of the line's start. |
| y2 | number | The y coordinate of the line's end. |
Describes properties passed to a component that renders the axis's 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 |
|---|---|---|
| ArgumentAxis.Root | ArgumentAxis.RootProps | A component that renders the axis's root layout. |
| ArgumentAxis.Tick | ArgumentAxis.LineProps | A component that renders the tick. |
| ArgumentAxis.Label | ArgumentAxis.LabelProps | A component that renders the axis's label. |
| ArgumentAxis.Line | ArgumentAxis.LineProps | A component that renders the axis's line. |
| ArgumentAxis.Grid | ArgumentAxis.LineProps | A component that renders the grid. |