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.HeatmapSeries
XYChart.HeatmapSeries
provides a slot for defining a HeatmapSeries
.
XYChartHeatmapSeriesProps
Name | Type | Default | Description |
---|---|---|---|
data? | [] | - | Data object for the xy chart. |
xAxisId | - | Unique Id required to attach the series to its x-axis. | |
yAxisId | - | Unique Id required to attach the series to its y-axis. | |
x0Accessor | - | Accessor function to retrieve the data for the x0. | |
x1Accessor? | - | Accessor function to retrieve the data for the x1. | |
y0Accessor | - | Accessor function to retrieve the data for the y0. | |
y1Accessor? | - | Accessor function to retrieve the data for the y1. | |
valueAccessor | - | Accessor function to retrieve the data for the value. | |
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 | |
colorPalette? | 'blue' | Color palette for the series. | |
actions? | (datapoint: ) => | - | Custom actions to be shown in the tooltip |