---
title: "Chart"
slug: "chart"
updated: 2026-01-21T14:42:23Z
published: 2026-01-21T14:42:23Z
canonical: "docs.sightmachine.com/chart"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sightmachine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

## Chart

BUILD leverages the [Plotly](https://plotly.com/python/) library to generate charts. We suggest using [Plotly Express](https://plotly.com/python/plotly-express/) with [Panda DataFrame](https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.html) to quickly create common charts.

Here's a reference to the [types of charts](https://plotly.com/python-api-reference/plotly.express.html) available.

### Overview

Here's a quick summary of how a Plotly chart is created and rendered:

1. Import plotly and set up the custom theme with our utility function.

```python
import plotly
import plotly.express as px
import plotly.io as pio
import plotly.graph_objects as go
from sm_udf.app_builder.util import setup_plotly_theme
setup_plotly_theme()
```

1. In Page Logic, we query SQL and create a Pandas DataFrame: `df.`
2. We use Python plotly.express to create the plotly figure i.e. `fig = px.bar(df, ....)`
3. We use `plotly.utils.PlotlyJSONEncoder` to convert `fig` into JSON.
4. We return the JSON to the Frontend JavaScript plotly to render.

### Example

```python
# === Bar Chart UI Panel ===
# Create the Bar Chart UI Panel from the SQL/DataFrame output
# ==========================

# check if no data returns
if df.empty:                        
    fig_json = None
else:  
    # create the bar chart, passing in df.
    # df in this example contains "Day", "Output" and "Shift" columns
    fig = px.bar(                   
        df,                         
        x='Day',
        y='Output',
        color="Shift"
    )
    # use update_layout to specify layout details.
    fig.update_layout(              
        xaxis=dict(
            tickformat='%Y-%m-%d',  
            tickvals=df['Day'],
            tickmode='array'
        )
    )

    # convert fig to json
    fig_json = json.loads(json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)) 
    
# create the panel and pass fig_json to viz_props
chart_panel = {
    "id": "plotly-chart",
    "viz_type": "plotly",
    "viz_props": fig_json,
    "title": {
        "value": "Bar Chart",
        "font-size": 16,
        "align": "left",
        "margin": "13px 13px 13px 13px",
    },
}
```

The above example generates this bar chart:

![Image](https://cdn.us.document360.io/c65001f1-30e3-4f1d-b335-57abf64ebd31/Images/Documentation/image(222).png)

**Page Linking**

To add page linking to a chart (selecting a point to go to another page), we add `link_mapping` to the `fig_json`:

```python
# === Create Page Link Mapping ===

link_mapping = {
    'page_id': 'sample_app_table',
    'mapping': {
        'asset': 'asset',
        'dateRange': 'dateRange',
        'filter': 'filter',
    }
}
fig_json['link_mapping'] = link_mapping
```

This will enable linking when a point on the chart is selected:

![](https://cdn.us.document360.io/c65001f1-30e3-4f1d-b335-57abf64ebd31/Images/Documentation/image(223).png)

More details here: Page Linking

### fig.show('iframe')

In Page Logic (Jupyter notebook), by running `fig.show('iframe')` the notebook will generate the chart inline. Use this for quicker development when testing specific chart configurations. Make sure to remove it once configured to keep the notebook clean.

![](https://cdn.us.document360.io/c65001f1-30e3-4f1d-b335-57abf64ebd31/Images/Documentation/image(224).png)