dccGraph

The dccGraph component can be used to render any plotly-powered data visualization, passed as the figure argument.

Primer on Plotly Graphing Library

Examples

in Dash

The fig object is passed directly into the figure property of dccGraph:

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import dcc
import plotly.express as px

df = px.data.iris()  # iris is a pandas DataFrame
fig = px.scatter(df, x="sepal_width", y="sepal_length")

dcc.Graph(figure=fig)

Using the Low-Level Interface with

Using the Low-Level Interface with

Read through (1) above to learn more about the difference between & .

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import dcc
import plotly.graph_objs as go

fig = go.Figure(data=[go.Scatter(x=[1, 2, 3], y=[4, 1, 2])])

dcc.Graph(figure=fig)

Using the Low-Level Interface with

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import dcc

dcc.Graph(
    figure={
        'data': [
            {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
            {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
        ],
        'layout': {
            'title': 'Dash Data Visualization'
        }
    }
)

Interactive Graphing with Callbacks

The Interactive Visualizations tutorial explains how to capture user interaction events with a dccGraph, and how to update the figure property in callbacks.

Some advanced features are documented in community forum posts: * How to preserve the UI state (zoom level etc.) of a Graph when updating the Graph in a callback https://community.plot.ly/t/preserving-ui-state-like-zoom-in-dcc-graph-with-uirevision/15793 * Graph transitions for smooth transitions or animations on Graph updates https://community.plot.ly/t/exploring-a-transitions-api-for-dcc-graph/15468

Controlling the Plotly.js Version Used by dccGraph

The Graph component leverages the Plotly.js library to render
visualizations. The Graph component comes with its own version of the Plotly.js library, but you can override it by placing a Plotly.js bundle in the assets directory.
This technique can be used to: * take advantage of new features in a version of Plotly.js that is more recent than the one that is included in the currently installed version of dash_core_components (or Dash Enterprise Design Kit). * take advantage of more desirable behavior of a version of Plotly.js that is less recent than the one that is included in the currently installed version of dash_core_components (or Dash Enterprise Design Kit). We strive to make Plotly.js releases completely backwards-compatible, so you shouldn’t have to do this very often. * use a Plotly-distributed Plotly.js partial bundle or a custom-built Plotly.js bundle which only includes the subset of Plotly.js features that your Dash app uses. Partial bundles are smaller than the full Plotly.js bundles that come with the Graph component and can therefore improve your app’s loading time.

For more information on Plotly.js, see the official library docs and the Plotly.js repo on GitHub.

Plotly.py also uses Plotly.js. The versions of Plotly.js used by default in Plotly.py, Dash’s dcc.Graph, and Dash Design Kit’s ddk.Graph may be different, so you may notice you’ll have access to more recent Plotly.js features in one library over another.

LaTeX

dccGraph supports rendering LaTeX on titles, labels, and annotations. It uses MathJax version 3.2 and can be enabled by setting mathjax=True on the component. Put content to be rendered with MathJax between $ delimiters. If you need a literal $, use the HTML entity $. To include text within MathJax delimiters, use \text{<your_text_goes_here>}. In the following example (solar radius) is included as text on the yaxis_title.

This example has not been ported to R yet - showing the Python version instead.

Visit the old docs site for R at: https://community.plotly.com/c/dash/r/21

from dash import Dash, dcc, html
import plotly.express as px

fig = px.line(x=[1, 2, 3, 4], y=[1, 4, 9, 16], title=r'$\alpha_{1c} = 352 \pm 11 \text{ km s}^{-1}$')
fig.update_layout(
    xaxis_title=r'$\sqrt{(n_\text{c}(t|{T_\text{early}}))}$',
    yaxis_title=r'$d, r \text{ (solar radius)}$'
)

app = Dash(__name__)

app.layout = html.Div([

    dcc.Markdown('''
    ## LaTeX in a Markdown component:

    This example uses the block delimiter:
    $$
    \\frac{1}{(\\sqrt{\\phi \\sqrt{5}}-\\phi) e^{\\frac25 \\pi}} =
    1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}}
    {1+\\frac{e^{-8\\pi}} {1+\\ldots} } } }
    $$

    This example uses the inline delimiter:
    $E^2=m^2c^4+p^2c^2$

    ## LaTeX in a Graph component:

    ''', mathjax=True),

    dcc.Graph(mathjax=True, figure=fig)]
)

if __name__ == '__main__':
    app.run_server(debug=True)

LaTeX in a Markdown component:

This example uses the block delimiter:
$$
\frac{1}{(\sqrt{\phi \sqrt{5}}-\phi) e^{\frac25 \pi}} =
1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}}
{1+\frac{e^{-8\pi}} {1+\ldots} } } }
$$

This example uses the inline delimiter:
$E^2=m^2c^4+p^2c^2$

LaTeX in a Graph component:

Rendering LaTeX is not currently supported on hovertext, texttemplate, ticktext, text on bar chart bars, or labels when displayed on pie charts. If you or your company would like to sponsor improvements to LaTeX rendering in Dash, get in touch with our advanced development team.

For an introduction to LaTeX math, see LaTeX/Mathematics.

Graph Resizing and Responsiveness

There are quite a few options that you can take advantage of if you want the size of your graph to be reactive.

The default plotly.js behavior dictates that the graph should resize upon window resize. However, in some cases, you might want to resize the graph based on the size of its parent container instead.
(You can set the size of the parent container with

The property of the dccGraph component allows you to define your desired behavior.
In short, it accepts as a value , : * forces the graph to be responsive to window and parent resize, regardless of any other specifications in or * forces the graph to be non-responsive to window and parent resize, regardless of any other specifications in or

How Resizing Works - Advanced

The properties of dccGraph that can control the size of the graph (other than ) are: * - explicitly sets the height * - explicitly sets the width * , sets the height and width of the graph to that of its parent container * , changes the height and width of the graph upon window resize.

The property works in conjunction with the above properties in the following way:


Graph Properties

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

id (character; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

responsive (a value equal to: true, false or ‘auto’; default 'auto'):
If True, the Plotly.js plot will be fully responsive to window resize
and parent element resize event. This is achieved by overriding
config.responsive to True, figure.layout.autosize to True and
unsetting figure.layout.height and figure.layout.width. If False,
the Plotly.js plot not be responsive to window resize and parent
element resize event. This is achieved by overriding
config.responsive to False and figure.layout.autosize to False. If
‘auto’ (default), the Graph will determine if the Plotly.js plot can
be made fully responsive (True) or not (False) based on the values in
config.responsive, figure.layout.autosize, figure.layout.height,
figure.layout.width. This is the legacy behavior of the Graph
component. Needs to be combined with appropriate dimension / styling
through the style prop to fully take effect.

clickData (named list; optional):
Data from latest click event. Read-only.

clickAnnotationData (named list; optional):
Data from latest click annotation event. Read-only.

hoverData (named list; optional):
Data from latest hover event. Read-only.

clear_on_unhover (logical; default FALSE):
If True, clear_on_unhover will clear the hoverData property when
the user “unhovers” from a point. If False, then the hoverData
property will be equal to the data from the last point that was
hovered over.

selectedData (named list; optional):
Data from latest select event. Read-only.

relayoutData (named list; optional):
Data from latest relayout event which occurs when the user zooms or
pans on the plot or other layout-level edits. Has the form {<attr>: <value>} describing the changes made. Read-only.

extendData (unnamed list | named list; optional):
Data that should be appended to existing traces. Has the form
[updateData, traceIndices, maxPoints], where updateData is an
object containing the data to extend, traceIndices (optional) is an
array of trace indices that should be extended, and maxPoints
(optional) is either an integer defining the maximum number of points
allowed or an object with key:value pairs matching updateData
Reference the Plotly.extendTraces API for full usage:
https://plotly.com/javascript/plotlyjs-function-reference/#plotlyextendtraces.

prependData (unnamed list | named list; optional):
Data that should be prepended to existing traces. Has the form
[updateData, traceIndices, maxPoints], where updateData is an
object containing the data to prepend, traceIndices (optional) is an
array of trace indices that should be prepended, and maxPoints
(optional) is either an integer defining the maximum number of points
allowed or an object with key:value pairs matching updateData
Reference the Plotly.prependTraces API for full usage:
https://plotly.com/javascript/plotlyjs-function-reference/#plotlyprependtraces.

restyleData (unnamed list; optional):
Data from latest restyle event which occurs when the user toggles a
legend item, changes parcoords selections, or other trace-level edits.
Has the form [edits, indices], where edits is an object {<attr>: <value>} describing the changes made, and indices is an
array of trace indices that were edited. Read-only.

figure (named list; default { data: [], layout: {}, frames: [],}):
Plotly figure object. See schema:
https://plotly.com/javascript/reference config is set separately by
the config property.

figure is a named list with keys:

style (named list; optional):
Generic style overrides on the plot div.

className (character; optional):
className of the parent div.

mathjax (logical; default FALSE):
If TRUE, loads mathjax v3 (tex-svg) into the page and use it in the
graph.

animate (logical; default FALSE):
Beta: If TRUE, animate between updates using plotly.js’s animate
function.

animation_options (named list; default { frame: { redraw: FALSE, }, transition: { duration: 750, ease: 'cubic-in-out', },}):
Beta: Object containing animation settings. Only applies if animate
is TRUE.

config (named list; optional):
Plotly.js config options. See
https://plotly.com/javascript/configuration-options/ for more info.

config is a named list with keys:

loading_state (named list; optional):
Object that holds the loading state object coming from dash-renderer.

loading_state is a named list with keys: