Skip to content

Commit

Permalink
Improve titles
Browse files Browse the repository at this point in the history
  • Loading branch information
huong-li-nguyen committed Oct 13, 2023
1 parent 2e96c07 commit 9de84bd
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions vizro-core/docs/pages/user_guides/custom_charts.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,23 @@
# How to create custom charts

This guide shows you how to create custom charts and how to add them to your dashboard.

The [`Graph`][vizro.models.Graph] model accepts the `figure` argument, where you can enter _any_ [`plotly.express`](https://plotly.com/python/plotly-express/) chart as explained in the user guide on [components][graph].
In general, the usage of our custom chart decorator `@capture("graph")` is required if your plotly chart requires any post-update calls or customization.

When to use our custom chart decorator
## Overview of custom charts

In general, the usage of the custom chart decorator `@capture("graph")` is required if your plotly chart requires any post-update calls or customization.

### When to use a custom chart

- If you want to use any of the post figure update calls by `plotly` e.g., `update_layout`, `update_xaxes`, `update_traces`, etc. (for more details, see the docs on [plotly's update calls](https://plotly.com/python/creating-and-updating-figures/#other-update-methods))
- If you want to use a custom-created [`plotly.graph_objects.Figure()`](https://plotly.com/python/graph-objects/) object (in short, `go.Figure()`) and add traces yourself via [`add_trace`](https://plotly.com/python/creating-and-updating-figures/#adding-traces)

In general, custom charts need to obey the following conditions:
### Requirements of a custom chart function

!!! note "Conditions for using any `go.Figure()` in [`Graph`][vizro.models.Graph]"
- a `go.Figure()` object is returned by a function
- this function must be decorated with the `@capture("graph")` decorator
- this function accepts a `data_frame` argument (of type `pandas.DataFrame`)
- the visualization is derived from and requires only one `pandas.DataFrame` (e.g. any further dataframes added through other arguments will not react to dashboard components such as `Filter`)
- a `go.Figure()` object is returned by the function
- the function must be decorated with the `@capture("graph")` decorator
- the function accepts a `data_frame` argument (of type `pandas.DataFrame`)
- the visualization is derived from and requires only one `pandas.DataFrame` (e.g. any further dataframes added through other arguments will not react to dashboard components such as `Filter`)

The below minimal example can be used as a base to build more sophisticated charts.

Expand Down Expand Up @@ -151,4 +152,4 @@ The below examples shows a more involved use-case. We create and style a waterfa
=== "Result"
[![Graph3]][Graph3]

[Graph3]: ../../assets/user_guides/custom_charts/custom_chart_waterfall.png
[Graph3]: ../../assets/user_guides/custom_charts/custom_chart_waterfall.png

0 comments on commit 9de84bd

Please sign in to comment.