DashForge / Charts & layout

Guide & API reference

Charts &
layout.

Start with Plotly figures, then decide how much control the report needs. DashForge defaults to a responsive grid, while the methods below let you define grouping, emphasis, labels, and chart-card behavior.

Recommended order

Build the content before the layout

Add all figures first. Methods that refer to chart positions or chart counts—such as row layout, titles, subtitles, and maximize buttons—depend on the order and number of figures already stored in the dashboard.

dashboard = Dashboard()
dashboard.add_chart([overview, trend, breakdown])

# Now configure the three chart cards in their added order.
dashboard.set_chart_per_row([1, 2])
dashboard.set_chart_titles(["Overview", "Trend", "Breakdown"])

API reference

add_chart

add_chart(chart)

Adds visual content to the dashboard. It accepts either one Plotly Figure or a list made entirely of Plotly figures. Each call appends to the existing chart collection—it does not replace charts that were added earlier.

Use it when: you have already built the figures and are ready to choose their dashboard presentation.

Pattern 1 — add one figure at a time

This is useful while your analysis creates figures in separate steps, or when conditional logic decides whether a particular chart should appear.

dashboard.add_chart(revenue_chart)
dashboard.add_chart(order_chart)

if show_forecast:
    dashboard.add_chart(forecast_chart)

Pattern 2 — add a related group in one call

Pass a list when all charts are known together. This is concise and makes the intended order obvious, which matters for later title and layout lists.

dashboard.add_chart([
    revenue_chart,
    orders_chart,
    regional_share_chart,
])

Pattern 3 — add groups over time

You can mix the two forms. The final order is the order in which figures were received across every call.

dashboard.add_chart(summary_chart)
dashboard.add_chart([trend_chart, distribution_chart])
# Card order is: summary, trend, distribution.

Input rule: a list must contain only plotly.graph_objects.Figure instances. A dictionary, a dataframe, a Plotly data trace, or a mixed list raises ValueError. Create the figure first, then pass the figure itself.

API reference

set_title

set_title(title)

Sets the dashboard title in two places: the browser tab and the visible header. Use a concise report-level name rather than the title of one specific chart.

dashboard.set_title("FY26 commercial performance")
dashboard.set_title("Customer retention — weekly review")

Scenario: Put the time range or audience in the title when it prevents ambiguity, for example "Operations snapshot · June 2026".

API reference

preset

preset(preset_name)

Chooses the dashboard layout implementation. The default and only currently supported value is "preset1", so you ordinarily do not need to call this method. It is included so future layouts can be selected explicitly.

# Optional today: this is the default.
dashboard.preset("preset1")

Constraint: unsupported preset names raise ValueError. Do not use internal layout method names; they are not part of the public API.

API reference

set_chart_per_row

set_chart_per_row(chart_amount)

Defines exactly how many chart cards appear in each dashboard row. Each number in the list represents one row, must be 1, 2, or 3, and all numbers together must equal the number of figures already added.

Pattern 1 — let DashForge choose

Do not call this method when a standard grid is enough. DashForge automatically fills rows with up to three charts. With four figures, the final dashboard has three charts in the first row and one chart in the second row.

dashboard.add_chart([fig1, fig2, fig3, fig4])
# Final layout:
# Row 1: fig1 | fig2 | fig3
# Row 2: fig4

Pattern 2 — emphasize a lead chart

dashboard.add_chart([overview, trend, map])
dashboard.set_chart_per_row([1, 2])
# Row 1: overview
# Row 2: trend | map

Pattern 3 — tell a sequence in rows

dashboard.add_chart([fig1, fig2, fig3, fig4, fig5, fig6])
dashboard.set_chart_per_row([2, 3, 1])
# Row 1: fig1 | fig2
# Row 2: fig3 | fig4 | fig5
# Row 3: fig6

Constraints: call it after add_chart(). With six charts, [2, 3, 1] is valid; [2, 2] is not because it accounts for only four. Values of 0, 4, or non-numeric items are also invalid.

API reference

set_custom_size

set_custom_size(sizes_list)

Changes individual chart-card widths and heights. It is deliberately precise: the list must mirror the dashboard’s row structure. Read it from outside to inside: sizes_list → one entry per row → one [width, height] pair per chart in that row.

What the numbers mean: 100 is the normal baseline for both dimensions. For height, 120 makes a card 20% taller than normal and 80 makes it 20% shorter. For width, numbers work as a row ratio: [100, 100] gives two equal-width cards (a 1:1 split), while [60, 40] gives the first card 60% of the row’s available width and the second 40%.
How to read the brackets: the outer [ ... ] is the full dashboard; each inner [ ... ] is one row; each final [width, height] pair belongs to one chart card. When you do not set custom sizes, DashForge uses normal heights and equal-width cards within each row.

Pattern 1 — two charts in one row

There is one row, so the outer list has one item. That row contains two charts, so it has two size pairs.

dashboard.set_chart_per_row([2])
dashboard.set_custom_size([
    [                 # Row 1
        [65, 100],    # Chart 1: 65 wide, 100 high
        [35, 100],    # Chart 2: 35 wide, 100 high
    ]
])

Pattern 2 — two charts, then three charts

There are two rows, so the outer list has two items. The first row must have two pairs; the second must have three.

dashboard.set_chart_per_row([2, 3])
dashboard.set_custom_size([
    [                 # Row 1 — two charts
        [60, 105],    # first chart
        [40, 105],    # second chart
    ],
    [                 # Row 2 — three charts
        [34, 85],     # third chart overall
        [33, 85],     # fourth chart overall
        [33, 85],     # fifth chart overall
    ],
])

Pattern 3 — customize only the important row

Use None for a row whose automatic sizing should remain untouched.

dashboard.set_chart_per_row([1, 3])
dashboard.set_custom_size([
    [[100, 115]],  # Row 1: one larger hero chart
    None,          # Row 2: DashForge's normal three-card sizing
])

Constraints: the number of outer entries must equal the number of rows. For a row of two charts, provide exactly two pairs. Each pair must contain exactly two numbers. Define set_chart_per_row() first when using a non-default row arrangement.

API reference

Card titles & subtitles

set_chart_titles

set_chart_titles(titles)

Displays a title at the top of each chart card. The list follows the order in which figures were added, not their visual position after resizing. Use None for a card that should have no title.

dashboard.set_chart_titles([
    "Revenue trend",
    "Orders by region",
    None,
])

Good use: give card-level context that should remain visible even if the Plotly figure itself has no title.

set_chart_subtitles

set_chart_subtitles(subtitles)

Displays supporting text below each card title. It is useful for definitions, data windows, or a short explanation of what colors or annotations mean.

dashboard.set_chart_subtitles([
    "Actuals through 30 June",
    "Color indicates sales territory",
    None,
])

Tip: keep subtitles informative and short. They complement a title; they should not restate it.

API reference

set_max_buttons

set_max_buttons(max_buttons)

A maximize button is the control on a chart card that lets a viewer expand that one chart to fill the chart area. When expanded, the other cards are hidden; selecting the control again returns to the normal grid. It is useful for dense charts where people need more room to inspect hover details, labels, or Plotly interactions.

By default, every chart receives this control. Use set_max_buttons() only when some cards should remain fixed in the normal dashboard layout. The boolean list follows the order in which charts were added: True shows the control, False removes it.

Pattern 1 — keep the default behavior

# No call needed: all chart cards can be maximized.

Pattern 2 — enable it only for detailed exploration

Keep the control for a map and a detailed trend, but omit it from simple summary charts.

dashboard.set_max_buttons([
    False,  # revenue summary: keep compact
    True,   # detailed trend: allow expansion
    True,   # map: allow expansion
    False,  # simple category chart: keep compact
])

Pattern 3 — intentionally disable all maximize controls

dashboard.set_max_buttons([False, False, False])

Constraint: provide exactly one boolean per chart. A four-chart dashboard needs four entries; a mismatched list or non-boolean value raises ValueError.

Next

Make the dashboard feel like yours

Once the figures read in the right order, move on to themes, colors, header choices, font, logo, and footer details.

Appearance & branding →