Skip to content
Use PyGWalker with Plotly Dash

Use PyGWalker with Plotly Dash


Embed PyGWalker visualizations within a Plotly Dash application to utilize Dash's hosting capabilities. This updated guide also includes steps to load a pre-existing visualization configuration.


  • Familiarity with PyGWalker and Plotly Dash.
  • Python environment set up.

Tools Introduction


  • An interactive data visualization library.
  • Enables intuitive drag-and-drop data exploration.
  • Supports a feature to load predefined visualization configurations.
  • Official Repository (opens in a new tab)

Plotly Dash

  • A user-friendly framework to host web-based data visualizations.
  • Allows data scientists to deploy interactive web applications without in-depth web development knowledge.
  • Official Website (opens in a new tab)

Integration Steps

  1. Environment Setup:

    • Install required libraries:
      pip install dash pygwalker dash-dangerously-set-inner-html datasets
  2. Data Preparation:

    • Load the NYC-Airbnb-Open-Data dataset from gradio.
    • Convert to Pandas DataFrame:
      dataset = load_dataset("gradio/NYC-Airbnb-Open-Data", split="train")
      df = dataset.to_pandas()
  3. PyGWalker Visualization with Predefined Config:

    • Use the walk function to obtain the visualization, providing the path to the pre-existing configuration viz-code.json:
      walker = pyg.walk(df, spec="./viz-code.json", debug=False)
      html_code = walker.to_html()
  4. Dash Integration:

    • Embed the PyGWalker HTML within the Dash application using dash-dangerously-set-inner-html. Ensure the HTML content is secure:
      app.layout = html.Div([
  5. Launch Dash App:

    • Execute the application to view the PyGWalker visualization hosted in a Dash web app:
      if __name__ == '__main__':


  • Leveraging a pre-existing visualization configuration facilitates consistent visualization setups across different datasets or platforms.
  • Always ensure the security and integrity of any HTML content added using dash-dangerously-set-inner-html.

Experience seamless data exploration by integrating PyGWalker's predefined visualization configurations within a Dash application.


PyGWalker + Dash Code example (opens in a new tab)