XYChart
The XYChart encompasses various types of charts that utilize both x-axis and
y-axis for data representation, designed to visually display and analyze data
that involve two numerical variables.
XYChartProps
, | Name | Type | Default | Description |
|---|---|---|---|
data | [] | - | Data object for the xy chart. |
height? | | | 300px | Chart height. When a number is specified, it's treated as pixels, otherwise a valid height string is expected. |
width? | 100% | Chart width. A number in pixels is expected. Otherwise, it will take the full width of the container | |
colorPalette? | 'blue' | Color palette for the xy chart. | |
loading? | false | Show the loading indicator when truthy. | |
truncationMode? | 'middle' | Truncation mode to be used as start, middle or end, and applied to all the parts that truncate text. |
XYChart.XAxis
To configure the x-axis, add XYChart.XAxis to the xy chart.
XYChartXAxisProps
Signature:
export declare type XYChartXAxisProps = & {
/**
* Whether the tick labels are displayed in a or layout.
* @defaultValue
*/
tickLabelLayout?: ;
position: ;
};XYChart.YAxis
To configure the y-axis, add XYChart.YAxis to the xy chart.
XYChartYAxisProps
Signature:
export declare type XYChartYAxisProps = & {
position: ;
};XYChart.Legend
To configure the legend, add XYChart.Legend to the xy chart.
XYChartChartLegendProps
Signature:
export declare type XYChartChart = ;XYChart.EmptyState
XYChart.EmptyState provides a slot where the Empty state wrapper can be set.
EmptyStateProp
| Name | Type | Default | Description |
|---|---|---|---|
children | . | - |
XYChart.ErrorState
XYChart.ErrorState provides a slot where the Error state wrapper can be set.
ErrorStateProps
| Name | Type | Default | Description |
|---|---|---|---|
children | . | ((errorMessage: ) => .) | - |
XYChart.RectSeries
XYChart.RectSeries provides a slot for defining a RectSeries.
XYChartRectSeriesProps
| Name | Type | Default | Description |
|---|---|---|---|
x1Accessor? | - | Accessor function to retrieve the data for the x1. | |
y1Accessor? | - | Accessor function to retrieve the data for the y1. | |
valueAccessor | - | Accessor function to retrieve the data for the value. | |
valueMin? | - | If specified, all values coming from the valueAccessor that are under this number will display a default color. Doesn't apply for category values. | |
valueMax? | - | If specified, all values coming from the valueAccessor that are above this number will display a default color. Doesn't apply for category values. | |
valueFormatter? | | <, > | - | If specified, the value coming from the valueAccessor will be formatted with given formatter options. Doesn't apply for string values. |
valueUnit? | - | A custom unit to be displayed in the Legend for number values | |
actions? | (datapoint: ) => | - | Custom actions to be shown in the tooltip |