Grid Layout
Signature
sp.build_grid(
charts: list[Chart],
*,
cols: int = 2,
width: int = 1200,
height: int = 800,
background: str | None = None,
gap: int = 12,
title: str = "",
) -> Chart
Aliases: sp.grid
Description
Arranges multiple charts in a responsive grid layout within a single HTML output.
Arrange plusieurs graphiques dans une mise en page grille responsive dans un seul fichier HTML.
Charts are placed left-to-right, top-to-bottom. When len(charts) is not divisible by cols, the last row is left-aligned.
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
charts | list[Chart] | required | Chart objects to embed |
cols | int | 2 | Number of columns |
width | int | 1200 | Total grid container width in pixels |
height | int | 800 | Total grid container height in pixels |
background | str | None | None | Grid background color |
gap | int | 12 | Gap in pixels between cells |
title | str | "" | Optional header above the grid |
Returns
Chart (composite)
Examples
Dashboard with 4 charts
import seraplot as sp
bar = sp.build_bar_chart("Revenue", labels=["A","B","C"], values=[100,200,150])
pie = sp.build_pie_chart("Share", labels=["A","B"], values=[60,40])
line = sp.build_line_chart("Trend", labels=["Jan","Feb","Mar"], values=[10,20,15])
hist = sp.build_histogram("Dist", values=[1,2,2,3,3,3,4,4,5])
dashboard = sp.build_grid(
[bar, pie, line, hist],
cols=2,
)const sp = require('seraplot');
const bar = sp.build_bar_chart("Revenue",
["A", "B", "C"],
{
values: [100, 200, 150]
})
const pie = sp.build_pie_chart("Share",
["A", "B"],
{
values: [60, 40]
})
const line = sp.build_line_chart("Trend",
["Jan", "Feb", "Mar"],
{
values: [10, 20, 15]
})
const hist = sp.build_histogram("Dist",
{
values: [1, 2, 2, 3, 3, 3, 4, 4, 5]
})
const dashboard = sp.build_grid([bar, pie, line, hist],
2)import * as sp from 'seraplot';
const bar = sp.build_bar_chart("Revenue",
["A", "B", "C"],
{
values: [100, 200, 150]
})
const pie = sp.build_pie_chart("Share",
["A", "B"],
{
values: [60, 40]
})
const line = sp.build_line_chart("Trend",
["Jan", "Feb", "Mar"],
{
values: [10, 20, 15]
})
const hist = sp.build_histogram("Dist",
{
values: [1, 2, 2, 3, 3, 3, 4, 4, 5]
})
const dashboard = sp.build_grid([bar, pie, line, hist],
2)▶ Live Preview
See also
Signature
sp.build_grid(
charts: list[Chart],
*,
cols: int = 2,
width: int = 1200,
height: int = 800,
background: str | None = None,
gap: int = 12,
title: str = "",
) -> Chart
Aliases: sp.grid
Description
Dispose plusieurs graphiques dans une grille responsive au sein d'un seul fichier HTML. Les graphiques sont placés de gauche à droite et de haut en bas. Si len(charts) n'est pas divisible par cols, la dernière ligne est alignée à gauche.
Paramètres
| Paramètre | Type | Défaut | Description |
|---|---|---|---|
charts | list[Chart] | requis | Objets Chart à intégrer |
cols | int | 2 | Nombre de colonnes |
width | int | 1200 | Largeur totale du conteneur en pixels |
height | int | 800 | Hauteur totale du conteneur en pixels |
background | str | None | None | Couleur de fond de la grille |
gap | int | 12 | Espacement en pixels entre les cellules |
title | str | "" | En-tête optionnel au-dessus de la grille |
Retourne
Chart (composite)
Exemples
import seraplot as sp
bar = sp.build_bar_chart("Chiffre d'affaires", labels=["A","B","C"], values=[100,200,150])
pie = sp.build_pie_chart("Parts", labels=["A","B"], values=[60,40])
line = sp.build_line_chart("Tendance", labels=["Jan","Fév","Mar"], values=[10,20,15])
hist = sp.build_histogram("Distribution", values=[1,2,2,3,3,3,4,4,5])
tableau = sp.build_grid(
[bar, pie, line, hist],
cols=2,
)