[Docs] Add documentation and examples for Figure

vizro-core/docs/pages/user-guides/components.md

@@ -6,39 +6,40 @@ listed below to fill your dashboard with visuals.
 
 <div class="grid cards" markdown>
 
-- :octicons-graph-16:{ .lg .middle } __Graph__
+- :octicons-graph-16:{ .lg .middle } __Graphs__
 
     ---
 
     Use graphs to visualize your data with any Plotly chart.
 
     [:octicons-arrow-right-24: View user guide](graph.md)
 
-- :material-table-large:{ .lg .middle } __Table__
+- :material-table-large:{ .lg .middle } __Tables__
 
     ---
 
     Use tables to visualize your tabular data.
 
     [:octicons-arrow-right-24: View user guide](table.md)
 
-- :material-cards-outline:{ .lg .middle } __Card & button__
+- :material-graph:{ .lg .middle } __Figures__
 
     ---
 
-    Use cards and buttons to visualize text, navigate to different URLs or attach any [action](actions.md).
+    Use figures to make any [Dash component](https://dash.plotly.com/#open-source-component-libraries) reactive.
 
-    [:octicons-arrow-right-24: View user guide](card-button.md)
+    [:octicons-arrow-right-24: View user guide](figure.md)
 
-- :material-graph:{ .lg .middle } __Figure__
+- :material-cards-outline:{ .lg .middle } __Cards & buttons__
 
     ---
 
-    Use figure to visualize your make any Dash component reactive.
+    Use cards and buttons to visualize text, navigate to different URLs or attach any [action](actions.md).
+
+    [:octicons-arrow-right-24: View user guide](card-button.md)
 
-    [:octicons-arrow-right-24: View user guide](figure.md)
 
-- :octicons-table-16:{ .lg .middle } __Container__
+- :octicons-table-16:{ .lg .middle } __Containers__
 
     ---
 

vizro-core/docs/pages/user-guides/custom-charts.md

@@ -3,26 +3,26 @@
 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 graphs](graph.md).
 
-## 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
+In general, the usage of the custom chart decorator `@capture("graph")` is required if your plotly chart requires any post-update calls or customization e.g:
 
-- If you want to use any of the post figure update calls by `plotly` such as `update_layout`, `update_xaxes`, `update_traces` (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)
+- You want to use any of the post figure update calls by `plotly` such as `update_layout`, `update_xaxes`, `update_traces` (for more details, see the docs on [plotly's update calls](https://plotly.com/python/creating-and-updating-figures/#other-update-methods))
+- 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)
 
-### Requirements of a custom chart function
+### Steps to create a custom chart
 
-- 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` (for example, any further dataframes added through other arguments will not react to dashboard components such as `Filter`)
+1. Define a function that returns a `go.Figure()`.
+2. Decorate it with `@capture("graph")`.
+3. The function must accept a `data_frame` argument (of type `pandas.DataFrame`).
+4. The visualization should be derived from and require only one `pandas.DataFrame`. Dataframes from other arguments
+will not react to dashboard controls such as [`Filter`](filters.md).
 
-The below minimal example can be used as a base to build more sophisticated charts.
+The below minimal example can be used as a base to build more sophisticated charts._
 
 ```py title="Minimal example of a custom chart"
 from vizro.models.types import capture
+import pandas as pd
+import plotly.graph_objects as go
 
 @capture("graph")
 def minimal_example(data_frame:pd.DataFrame=None):

vizro-core/docs/pages/user-guides/custom-components.md

@@ -11,7 +11,7 @@ In general, you can create a custom component based on any dash-compatible compo
 
 
 All our components are based on `Dash`, and they are shipped with a set of sensible defaults that can be modified. If you would like to overwrite one of those defaults,
-or if you would like to use extra `args` or `kwargs` of those components, then this is the correct way to include those. You can use any existing attribute of any underlying Dash component with this method.
+or if you would like to use extra `args` or `kwargs` of those components, then this is the correct way to include those. You can use any existing attribute of any underlying [Dash component](https://dash.plotly.com/#open-source-component-libraries) with this method.
 
 !!!note