The Legend plugin visualizes the legend.
Use the following statement to import the plugin:
import { Legend } from '@devexpress/dx-react-chart-material-ui';
// import { Legend } from '@devexpress/dx-react-chart-bootstrap4';If you want to use custom components, you can import the themeless plugin:
import { Legend } from '@devexpress/dx-react-chart';| Name | Type | Default | Description |
|---|---|---|---|
| markerComponent | ComponentType<object> | A component that renders a marker. | |
| labelComponent | ComponentType<Legend.LabelProps> | A component that renders the legend label. | |
| rootComponent | ComponentType<Legend.RootProps> | A component that renders the legend's root layout. | |
| itemComponent | ComponentType<Legend.ItemProps> | A component that renders a legend item. | |
| position? | 'left' | 'right' | 'top' | 'bottom' | 'right' | The legend position. |
Describes properties passed to a component that renders the label.
| Field | Type | Description |
|---|---|---|
| text | string | number | Item text. |
Describes properties passed to a component that renders the legend's root layout.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render the legend's root layout. |
Describes properties passed to a component that renders a legend item.
| Field | Type | Description |
|---|---|---|
| children | ReactNode | A React node used to render an item. |
| Name | Properties | Description |
|---|---|---|
| Legend.Root | Legend.RootProps | A component that renders the root layout. |
| Legend.Item | Legend.ItemProps | A component that renders an item. |
| Legend.Marker | object | A component that renders a marker. |
| Legend.Label | Legend.LabelProps | A component that renders the label. |