4/11/23, 1:10 PM Part 3.

Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly

Star 18,468

Python

Dash Python > Part 3. Interactive Graphing and Crossfiltering

Interactive Visualizations

This is the 3rd chapter of the Dash Fundamentals. The previous chapter covered basic callback usage. The
next chapter describes how to share data between callbacks. Just getting started? Make sure to install the
necessary dependencies.

The Dash Core Components ( dash.dcc ) module includes a Graph component called dcc.Graph .

dcc.Graph renders interactive data visualizations using the open source plotly.js JavaScript
graphing library. Plotly.js supports over 35 chart types and renders charts in both vector-quality
SVG and high-performance WebGL.

The figure argument in the dcc.Graph component is the same figure argument that is used
by plotly.py . Check out the plotly.py documentation and gallery to learn more.

As we already saw, Dash components are described by a set of attributes. Any of these attributes
can be updated by callback functions, but only a subset of these attributes are updated through
user interaction, such as typing inside a dcc.Input component or clicking an option in a
dcc.Dropdown component.

The dcc.Graph component has four attributes that can change through user-interaction:
hoverData , clickData , selectedData , relayoutData . These properties update when you
hover over points, click on points, or select regions of points in a graph.

For optimal user interaction and chart loading performance, Dash apps in production should
consider the Job Queue, HPC, Datashader, and horizontal scaling capabilities of Dash Enterprise.

Here's an simple example that prints these attributes to the screen.

3.5

2.5
y

https://dash.plotly.com/interactive-graphing 1/4
4/11/23, 1:10 PM Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly

1.5

1 1.2 1.4 1.6

Hover Data Click Data Selection Data Zoom and Relayout

Data
Mouse over values Click on points in Choose the lasso or
in the graph. the graph. rectangle tool in the Click and drag on
graph's menu bar the graph to zoom
null null and then select or click on the zoom
points in the graph. buttons in the
graph's menu bar.
Note that if
Clicking on legend
layout.clickmode
items will also fire
= 'event+select' , this event.
selection data also
accumulates (or un- {
accumulates) "autosize": tr
selected data if you }
hold down the shift
button while
clicking.

null

Update Graphs on Hover

Let's update our world indicators example from the previous chapter by updating the time series
when we hover over points in our scatter plot.

Fertility rate, total (births per wom… Life expectancy at birth, total (years)
× ×
Linear Log Linear Log

https://dash.plotly.com/interactive-graphing 2/4
4/11/23, 1:10 PM Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly

85
2.2 Japan
Fertility rate, total (births per woman)
2
80

1.8

Value
Life expectancy at birth, total (years)
75
1.6

70 1.4

1960 1970 1980 1990

65
Year

60
Life expectancy at birth, total (years)
80
55

Value
75
50

45 70

1960 1980 2
2 4 6 8

Fertility rate, total (births per woman) Year

1962
1967
1972
1977
1982
1987
1992
1997
2002
2007

Try moving the mouse over the points in the scatter plot on the left. Notice how the line graphs on
the right update based on the point that you are hovering over.

Sign up for Dash Club → Two free cheat sheets plus updates from Chris Parmer and Adam
Schroeder delivered to your inbox every two months. Includes tips and tricks, community apps, and
deep dives into the Dash architecture. Join now.

Generic Crossfilter Recipe

Here's a slightly more generic example for crossfiltering across a six-column data set. Each
scatter plot's selection filters the underlying dataset.

https://dash.plotly.com/interactive-graphing 3/4
4/11/23, 1:10 PM Part 3. Interactive Graphing and Crossfiltering | Dash for Python Documentation | Plotly

On every selection, the three graph callbacks are fired with the latest selected regions of each plot.
A pandas dataframe is filtered based on the selected points and the graphs are replotted with the
selected points highlighted and the selected region drawn as a dashed rectangle.

As an aside, if you find yourself filtering and visualizing highly-dimensional datasets, you should consider
checking out the parallel coordinates chart type.

Current Limitations
There are a few limitations in graph interactions right now.

It is not currently possible to customize the style of the hover interactions or the select box.
This issue is being worked on in https://github.com/plotly/plotly.js/issues/1847.

There's a lot that you can do with these interactive plotting features. If you need help exploring
your use case, open up a thread in the Dash Community Forum.

The next chapter of the Dash Fundamentals explains how to share data between callbacks. Dash
Fundamentals Part 4. Sharing Data Between Callbacks

Dash Python > Part 3. Interactive Graphing and Crossfiltering

Products Pricing About Us Support Join our mailing

Dash Enterprise Pricing Careers Community Support list

Consulting and Training Resources Graphing Documentation

Sign up to stay in the
Blog
loop with all things Plotly
— from Dash Club to
product updates,
webinars, and more!

SUBSCRIBE

Copyright © 2023 Plotly. All rights reserved. Privacy Policy

https://dash.plotly.com/interactive-graphing 4/4