Skip to content

Plotly Graph

A component that displays Plotly graphs.

You can listen to events triggered by Plotly.js and add interactivity to your charts. For example, implement cross-filtering.

Fields

NameTypeDescriptionOptions
Graph specificationObjectPlotly graph specification. Pass it using state, e.g. @{fig}, or paste a JSON specification.
Custom CSS classesTextCSS classes, separated by spaces. You can define classes in custom stylesheets.

Events

NameDescriptionUsage
plotly-clickSends a list with the clicked points.
plotly-selectedSends a list with the selected points.
plotly-deselectTriggered when points are deselected.

Low code usage

This component can be declared directly in Python, using backend-driven UI.

python
ui.PlotlyGraph(content={
        "spec": {}, # Union[Dict, str] 
        "cssClasses": "", # str 
    },
    handlers={
        "plotly-click": handle_event,
        "plotly-selected": handle_event,
        "plotly-deselect": handle_event,
    }
)
A function, in this example handle_event, should be implemented in your code to handle events.
python
def handle_event(state, payload, context, ui):
  pass

Reference