Chart
Chart
component displays data in a graphical format.Chart types
Chart
component supports four different types of charts: scatter plots,
line charts, bar charts, and pie charts.Scatter plots
weight
is chosen to be the x-axis, and one point is generated for each pair
of (weight
, length
) provided.tsxCopied1<Chart2type="scatter"3title="Cat lengths and weights"4xAxisTitle="Weight (pounds)"5xAxis="weight"6yAxisTitle="Length (inches)"7data={[8{ weight: 8.1, length: 15 },9{ weight: 9.5, length: 13.7 },10{ weight: 10.2, length: 16.8 },11{ weight: 9.3, length: 15.3 },12{ weight: 9.4, length: 16.7 },13{ weight: 8.8, length: 14 },14]}15/>
Line charts
age
is chosen to be the x-axis. Three different datasets are provided,
representing a different cat each (Baosky
, Hazel
, Peaches
), and one line is generated for each
cat by joining up the provided weights at different ages.tsxCopied1<Chart2type="line"3title="Cat weight by age"4xAxisTitle="Age (months)"5xAxis="age"6yAxisTitle="Weight (pounds)"7data={[8{ age: 3, Baosky: 5.2, Hazel: 5.4, Peaches: 6.1 },9{ age: 6, Baosky: 5.9, Hazel: 5.8, Peaches: 6.3 },10{ age: 9, Baosky: 7, Hazel: 6.6, Peaches: 6.8 },11{ age: 12, Baosky: 8.5, Hazel: 8.6, Peaches: 8.9 },12]}13/>
Bar charts
age
is chosen to be the x-axis. Three different datasets are provided,
representing a different cat each (Baosky
, Hazel
, Peaches
). For each different value of the
x-axis, a set of bars is generated for each dataset, indicating the weight of the cat at that age.tsxCopied1<Chart2type="bar"3title="Cat weight by age"4xAxisTitle="Age (months)"5xAxis="age"6yAxisTitle="Weight (pounds)"7data={[8{ age: 3, Baosky: 5.2, Hazel: 5.4, Peaches: 6.1 },9{ age: 6, Baosky: 5.9, Hazel: 5.8, Peaches: 6.3 },10{ age: 9, Baosky: 7, Hazel: 6.6, Peaches: 6.8 },11{ age: 12, Baosky: 8.5, Hazel: 8.6, Peaches: 8.9 },12]}13/>
Pie charts
food
attribute
that indicates the amount of food that a particular cat has eaten that week. The labels
prop is
used to indicate which cat each amount of food corresponds to.tsxCopied1<Chart2type="pie"3title="Cat food by week"4labels={["Baosky", "Peaches", "Hazel"]}5data={[{ food: 3.4 }, { food: 4.5 }, { food: 5.8 }]}6/>
Data format
Chart
component can receive data through the data
prop. This prop expects data in one of two
formats: row-based or column-based. The format will be automatically inferred by the Chart
component.Row-based data
tsxCopied1<Chart2type="scatter"3data={[4{ x: 2, square: 4, cube: 8 },5{ x: 3, square: 9, cube: 27 },6{ x: 4, square: 16, cube: 64 },7]}8/>
Column-based data
age
, and three different series of data
indicating the weight of each cat at that age are provided, each as an array.tsxCopied1<Chart2type="line"3title="Cat weight by age"4xAxisTitle="Age (months)"5xAxis="age"6yAxisTitle="Weight (pounds)"7data={{8age: [3, 6, 9, 12],9Baosky: [5.2, 5.9, 7, 8.5],10Hazel: [5.4, 5.8, 6.6, 6.8],11Peaches: [6.1, 6.3, 6.8, 8.9],12}}13/>
Task backed
task
prop to call an Airplane task. The axes and data are
automatically inferred from the output of the task, though you may still need to set the chart
titles manually.tsxCopied1<Chart type="line" task="get_cat_weights" />
Customizing data
outputTransform
prop to an appropriate
format.tsxCopied1<Chart2type="line"3task="get_cat_weights"4outputTransform={(data) => ({5...data,6total: data.age.map(7(age: number, idx: number) => data.Baosky[idx] + data.Hazel[idx] + data.Peaches[idx],8),9})}10/>
Using a subset of the data
datasets
prop (for
line, scatter, and bar charts) or the dataset
prop (for pie charts).datasets
prop (to ["Baosky", "Hazel"]
), we can limit the
chart to only show data for the two cats Baosky and Hazel.tsxCopied1<Chart type="line" task="get_cat_weights" datasets={["Baosky", "Hazel"]} />
Point selection
selectedPoints
prop in the
component state.tsxCopied1const chartState = useComponentState("catChart");2return (3<>4<Chart type="line" task="get_cat_weights" id="catChart" />5<Text>{JSON.stringify(chartState.selectedPoints)}</Text>6</>7);
Component API
Override colors used to render datasets.
If using a scatter, bar, or line chart, this should be a `Record<string, string>`, indicating the color of each dataset.
If using a pie chart, this should be a `string[]`, indicating the color of each slice of the pie chart.
Color can either be a built-in color:
`"orange" | "yellow" | "lime" | "green" | "teal" | "cyan" | "blue" | "indigo" | "violet" | "grape" | "pink" | "red" | "gray" | "dark"`
Or a custom CSS color:
`"rgba(1, 2, 3, 0.5)" | "#efefef"`
Data to render in the chart.
Supports an array of objects:
[{x: 0, y: 100}, {x: 1, y: 101}, ...]
and also an object of arrays:
{x: [0, 1], y: [100, 101]}
Use xAxis
and datasets
to control which fields are rendered.
Which field of data
to use in the pie chart.
Which fields of data
to use in the chart. Each field is a separate series.
Renders an error message.
If true, the element will grow to fill available space.
This prop works only if the element is a direct child of a Stack.
The ID referenced by the global component state.
Labels for values in data
.
Position of the legend.
Renders a loading indicator when true.
The variant of the bar graph.
Callback to transform the task output.
The task query to execute when this component loads. The component's data will be populated by the task's output and loading and error states will be handled automatically.
If the task doesn't require any parameters or special options, you can just pass the task slug (task="my_task"
) or an AirplaneFunc
—the return value of airplane.task()
(task={myTask}
).
If the task does require parameters or special options, pass the task as an object. If you are using a slug, specify the slug
prop to pass the task configuration as a SlugQuery
. If you are using an AirplaneFunc
, specify the fn
prop to pass the task configuration as a FunctionQuery
.
Title to show above the chart.
Type of chart.
Which field of data
to use for the chart's x-axis.
A custom range for the x-axis from the first element to the second element. This can also be set to "tozero" which sets the start of the range to 0 and auto-calculates the end. If not set, the range is auto-calculated based on the extrema of the input data.
Title for the x-axis.
Type of x-axis.
Formatting for y-axis values, similar to xAxisFormat. See xAxisFormat for details.
A custom range for the y-axis from the first element to the second element. This can also be set to "tozero" which sets the start of the range to 0 and auto-calculates the end. If not set, the range is auto-calculated based on the extrema of the input data.
Title for the y-axis.
Type of y-axis.
State API
Changes the selected points in the chart.
Clears the current selection.
Points that have been selected. Only applicable for scatter, line, and bar charts.