Skip to content

Getting Started

Follow this guide to learn how to create an app from a dataset in Plotly Studio. To get started, if you haven't already, download and install Plotly Studio.

Opening Plotly Studio and logging in

When you open Plotly Studio, select Login to get started or log in with Dash Enterprise. See the Installing and Setting Up Plotly Studio page for more details on installing and logging into Plotly Studio for the first time.

Projects

In Plotly Studio, a Project holds your app's data, the prompts used to generate the app, and generated code.

Projects are automatically saved as you work, so you can leave a project and return to it later. Draft projects (projects that don't have an app generated yet) appear in your projects list alongside completed apps.

Creating a new project

When you log in for the first time, Plotly Studio opens on the New Project page where you can start creating your app. This takes you to the Data tab where you can add and transform your data.

The next time you open Plotly Studio you'll be taken to the Projects page, where you can select + New Project to start a new project.

Projects view

Managing projects

Select on a project card to rename, duplicate, or delete a project.

When working on a project, three tabs are always accessible at the top of Plotly Studio:

  • Data - Upload files, connect to external data sources, and query and transform your data.
  • App - Preview, edit, and publish your generated app.
  • Explore - Browse suggested charts based on your data and create charts from images.

You can switch between these tabs as you build your app. For example, you can go back to Data to change the data source, go to App to see previews, edit existing charts, and publish or export the app, or go to Explore to see chart suggestions.

Data

From the Data tab, you can add data, query and transform it, and select which version to use for your app.

Adding data

You can add data by uploading a CSV or Parquet file (up to 200 MB), selecting Try sample data to use a built-in dataset, or using the chat to connect to an external data source. Use the quick action buttons or describe your data source in the chat. For example:

Connect to my PostgreSQL database
Connect to this data at https://plotly.github.io/datasets/country_indicators.csv
Connect to my Snowflake warehouse

Choose a data source

If a data source requires credentials, you can add them in the Credentials tab. See Data Sources for more details on connecting to external data sources.

Querying and transforming data

After adding data, you can query and transform it using the chat. Here's an example using the built-in dataset to add a calculated column:

add a calculated column "shipping days" as the difference between created date and shipping date

As you query and transform your data, Plotly Studio saves versions as separate data sources. Use the dropdown to switch between versions.

Data source dropdown

Learn more about data transformations in Querying and transforming data.

Once you've selected the version of the data source you want to use, select Continue to start building your app.

Generate app button

You can return to the Data tab at any time to modify your data source, queries, or transformations.

App

Once you select the data to use, you'll be taken to the App tab. From here, you can select Generate charts to generate a first draft with six charts and supporting components that you can edit. Alternatively, you can Create a new visualization from scratch or explore suggestions.

App tab landing page

Creating charts from scratch

If you select Create a new visualization, describe the type of chart you'd like to add to the app and select Add chart.

Add chart

After creating your first chart, if you want to return to the Add chart screen, select + Add in the Charts section of the sidebar.

Add chart from sidebar

Prompt reference and examples

In Plotly Studio, select in the top right corner to see chart types and prompt examples. You'll find further examples in the Prompt Library.

Explore chart suggestions

If you select explore suggestions, you'll be taken to the Explore tab, where you can browse suggested charts based on your data.

Explore tab

Select Generate on a suggested chart to add it to your app, or select View prompt to customize it first.

Once you've added charts, select View on a chart to see a preview of that specific chart, or select the App tab to see a preview of your full app. You can return to the Explore tab at any time to add more charts.

Creating a chart from an image

From the Explore tab, you can also create a chart by uploading an image of a chart.

To create a chart from an image:

  1. In Explore, select Create from image:

    Create from image option in explore

  2. Upload the image and optionally add additional information about how to create the chart. If the chart in the image uses a different data structure than your dataset, provide instructions on how to map your data to the chart.

  3. Select Create from image in the dialog. Plotly Studio generates an editable prompt that describes the chart to create.

  4. Review the prompt, make any changes, and select Generate.

App components

In the App tab, the sidebar on the left shows menu options to view and update specific parts of the app:

Setup:

  • Layout - How the app is structured, what components it includes, and the order in which they are displayed.
  • Theme - How the app is styled, and what colors and typography it uses.

Components:

  • Filter component - Global filters that filter data used in other components, the data cards, data table, and charts.
  • Data cards - Summary statistics and key metrics.
  • Data table - Tabular view of the data.
  • Charts - Visualizations of the data.

All components listed

Editing components

Select a component from the sidebar and you'll see an editable prompt, a preview, a specification, code, and logs:

Options available for a component or setup

You can also open a component from the app preview on the App Summary page:

Selecting edit from the main app preview

Editable Prompt

The editable prompt is a high-level description of this specific part of the app. Updates to the prompt regenerate the app and update the preview.

Preview

This is a preview of this specific part of the app. Note: A preview is not available for the Layout.

Specification

The specification is a natural language description of the Python code. When updating the prompt, you can copy parts of the specification into the prompt if there are parts of the existing app that you want to retain.

Spec example

Code

Editable Python code that uses Dash and other Plotly libraries. It is what powers the app and preview and is published to Plotly Cloud. It updates when you make prompt updates.

Code example

See the Working with Code in Plotly Studio page for a complete guide to how Plotly Studio generates code and how to make updates.

Logs

Logs are messages emitted from the code as it runs. The Logs tab shows new logs when you view and interact with the preview, showing how data was loaded, filtered, and transformed before rendering the output. For example, if you go to the preview tab and change multiple dropdowns that filter a chart, the logs update to show the new input values, the output of each filter step, and the final filtered data.

As well as data previews for each step, logs include timing information and any errors that occurred. This can help you understand what the code is doing, spot-check data transformations, and debug issues. For example, if your chart shows unexpected results, check the logs to see the row count and data preview after each step to identify where the issue occurred. See Viewing and Editing Code for more details.

Logs view

Editing the prompt

To update any part of your app, edit its prompt and select the regenerate button.

Regenerate the component

You can also generate a new version using the existing prompt with the Remix option:

Remix

Info

You won't see the Remix option if you have made changes to the text in the prompt box but haven't regenerated.

Regeneration using a new prompt or remixing with the existing prompt updates the preview, specification, and code.

Editing the code

If you have a plan that supports it, you can also update the code directly from the Code tab. For themes, the code is a Dash Design Kit theme file.

Removing components

To delete a component, hover over the component name in the sidebar and select its delete button. Data cards, data tables, and charts can be deleted.

Delete components

Publishing

Once you are happy with your app, you can publish it to Plotly Cloud or Dash Enterprise by selecting Publish and then Publish app. If publishing to Plotly Cloud, you can also choose your app's visibility before publishing. For Dash Enterprise, see App Privacy.

Publish app

Select Publish and then View published app to go to the app:

View published app

To update your live app, select Republish app from the Publish menu:

Republish app