Plots

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()

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'
    )
]

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"

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"

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']}")

See the Plotly documentation for more details and examples.

Default interactivity

Plots are interactive by default: the user can zoom in on sections, save images, or open the data in the new tab via the Plotly toolbar in the corner of the plot:

If you don’t want this interactivity, you can create a static plot by setting the Plot component’s interactive property to False.

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.

Do you still have questions?

Our Community Forum is full of helpful information and Anvil experts.