Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

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 = go.Marker(
      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 = [
    go.Annotation(
      text = 'Simple annotation',
      x = 0,
      xref = 'paper',
      y = 0,
      yref = 'paper'
    )
]
A bar chart and a scatter plot on the same axis.

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.