Examples of what can be achieved through either:

• Configuring a Chart component with Plotly JSON
• Using a custom component

NOTES:

1. This repo is intended for examples that can be configured entirely within the Retool IDE. It does not include custom components with a complete web bundling process to generate a single js file.
2. Because the JSON may include inline JS, it does not necessarily conform to the JSON spec
3. Because this content is taken straight from the Retool IDE, data and layout javascript objects may not conform to the JSON spec (e.g. unquoted keys)

Technical Webinar: Building Data-Driven Dashboards in Retool

Each configuration here contains a screencap of the visualization, and files containing JSON values that can be used

Not all files are present for every vis, but where available they should be used as follows:

• data.json: add to the Data field in the Chart component (after selecting the Plotly JSON option)
• layout.json: add to the Layout field in the Chart component (after selecting the Plotly JSON option)
• temp_state.json: create a temp variable to hold this value

• getData.js: create a getData JS query with the contents of this file. Set the Data option of the Chart component to {{ getData.data }}
• getLayout.js: create a getLayout JS query with the contents of this file. Set the Layout option of the Chart component to {{ getLayout.data }}
• anyOtherFunction.js: if there are more .js files, add them as JS queries using the same name eg 'anyOtherFunction' in this example

NOTE: if a temp_state.json file is provided, you will need to inspect data.json or layout.json to validate the correct name for the temp variable.

3D Chart

Bubble Chart

Bubble Chart 2

Bullet Chart

Double Y Axis

Exploded Pie Chart

Funnel Chart

Funnel Chart 2

Gauge Chart

Line Chart

Sankey Diagram

Scatter Geo

Stacked Bar Chart

Ternary Chart

Waterfall Chart

Sankey Chart

Tree Diagram