Chart

A chart to visualize data. It supports bar, line, pie, and scatter, dataset grouping and styles, layout customization, and aggregation methods like sum, average, and standard deviation.

Chart uses Plotly to define its data and layout. Refer to Plotly's JavaScript reference to learn more about available options or check out Retool's how-to for a step-by-step guide on building with the Chart component.

Pie chart

Pie chart screenshot

Bar graph

Bar graph screenshot

Line graph

Line graph screenshot

Properties

Available properties for Chart. You can write JavaScript almost anywhere in Retool to manipulate or read information about components.

NameDescriptiondatasource

The UI Form source data for the chart.

data

The Plotly JSON data to render the chart. Either provided directly or automatically generated from datasource.

chartType

The chart type. Either bar, line, scatter, or pie.

title

The title to display.

xAxisTickFormat

The d3-formatted tick label formatting for the X-axis.

xAxisTitle

The title to display for the X-axis.

yAxisTickFormat

The d3-formatted tick label formatting for the Y-axis.

yAxisTitle

The title to display for the Y-axis.

Events

Events are triggered by user interactions with Chart. Use event handling to trigger queries or other actions in response to events.

NameDescriptionSelect

A user selects a value.

Clear

A user clears the current value.

Methods

Methods for interacting with Chart. You can write JavaScript almost anywhere in Retool and use methods to manipulate data or components.

NameDescriptionscrollIntoView(options: any)

Scrolls the canvas or parent container so that the selected component appears in the visible area.

clearSelectedPoints()

Clear the selected points.