You are currently viewing the new Beta Editor Docs.
Switch to the Classic Editor Docs
You are currently viewing the Classic Editor Docs.
Switch to the Beta Editor Docs

Plots Plot Toolbox icon

Properties | Events

The Plot component is a Plotly Plot. Drag and drop onto your Form, or create one in code with the Plot constructor.

Plots are interactive - move the mouse over a plot to see the available tools.

# Create a plot

b = Plot()
A dashboard made up of Plot components.

A dashboard made up of Plot components.

Configuring plots

Plots are configured using utility classes from the plotly.graph_objects module. Display a plot by setting the data and layout properties of the Plot component. The data property should be set to a list of traces as described in the Plotly documentation.

from plotly import graph_objects as go

# Plot some data
self.plot_1.data = [
  go.Scatter(
    x = [1, 2, 3],
    y = [3, 1, 6],
    marker = dict(
      color= 'rgb(16, 32, 77)'
    )
  ),
  go.Bar(
    x = [1, 2, 3],
    y = [3, 1, 6],
    name = 'Bar Chart Example'
  )
]

The layout property should be set to a dictionary describing the layout of the plot. You can also set layout properties as attributes, such as self.plot_1.layout.yaxis.title = 'carbon emissions'.

# Configure the plot layout
self.plot_1.layout = {
  'title': 'Simple Example',
  'xaxis': {
    'title': 'time'
  }
}
self.plot_1.layout.yaxis.title = 'carbon emissions'
self.plot_1.layout.annotations = [
    dict(
      text = 'Simple annotation',
      x = 0,
      xref = 'paper',
      y = 0,
      yref = 'paper'
    )
]
A bar chart and a scatter plot on the same axis.

The templates property allows you to set your app’s plot styling. You can set it to one of the pre-set Plotly templates or one of Anvil’s: material_light, material_dark and rally.

# Setting the app's default plot styling

Plot.templates.default = "material_light"
A plot which uses the material-light theme.

A plot which uses the material-light theme.

Templates can also be set for each individual plot, rather than the whole app:

# Setting an individual plot's template

self.plot_1.layout.template = "material_light"

You can also save your own custom template, as long as it’s written in object form:

Plot.templates["my_template"] = {"layout": {"plot_bgcolor": "bisque"}}

Plot.templates.default = "my_template"
A plot styled using a custom template.

A plot styled using a custom template.

Handling events

You can handle events raised when the user clicks, selects or hovers over data points. The click, select, hover and unhover events all provide a points keyword argument. This is a list of dictionaries, each with the following keys:

  • curve_number - the index of the data series that was clicked.
  • point_number - the index of the data point that was clicked. Not available for histograms.
  • point_numbers - a list of indices of the points aggregated into the clicked bin. Only available for histograms.
  • x, y, z, lat, lon - the position of the point that was clicked, depending on the plot type.

For example, to print the x and y coordinates when a user hovers over a data point:

def plot_1_hover(self, points, **event_args):
  """This method is called when a data point is hovered."""
  print(f"User hovered over x:{points[0]['x']} and y:{points[0]['y']}")

Plots are interactive by default. Create a static plot by setting the interactive property to False.

See the Plotly documentation for more details and examples.

Other plotting libraries

You can use other plotting libraries with Anvil. Many libraries such as Alatair, Bokeh and Pygal produce dynamic plots that work fully interactively in Anvil.

For more detail, see the How-to Guide on Making Plots in Anvil.