Composant · Données

ColumnPyramidChart

Documenté

ColumnPyramidChart compare une valeur par catégorie comme un histogramme, mais chaque colonne est un triangle : base large posée sur l'axe X, sommet centré à la hauteur de la valeur. Sa silhouette effilée accentue la pointe et allège l'encre par rapport à une barre pleine.

Exemples

Colonnes pyramidales

Catégories en abscisse, triangles montant vers la valeur sur l'axe gradué.

Colonnes pyramidales

T1: 42
T2: 58
T3: 73
T4: 64

Voir le code (Svelte)

<div class="chart-wrapper">
  <ColumnPyramidChart
    label="Revenu par trimestre"
    data={[{"category":"T1","value":42,"tone":"category1"},{"category":"T2","value":58,"tone":"category1"},{"category":"T3","value":73,"tone":"category1"},{"category":"T4","value":64,"tone":"category1"}]}
  />
</div>

Catégories multiples

Une teinte par catégorie pour comparer plusieurs segments d'un coup d'œil.

Catégories multiples

Cloud: 40
Mobile: 25
Bureau: 20
IoT: 15

Voir le code (Svelte)

<div class="chart-wrapper">
  <ColumnPyramidChart
    label="Part par segment"
    data={[{"category":"Cloud","value":40,"tone":"category1"},{"category":"Mobile","value":25,"tone":"category2"},{"category":"Bureau","value":20,"tone":"category3"},{"category":"IoT","value":15,"tone":"category4"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`ColumnPyramidChartDatum[]`	requis
`label`	`string`	requis
`tone`	`ColumnPyramidChartTone`	`"category1"`
`width`	`number`	`480`
`height`	`number`	`280`
`class`	`string`	optionnel

ColumnPyramidChartDatum = { category: string; value: number; tone?: ColumnPyramidChartTone } · ColumnPyramidChartTone = "category1" | ... | "category8".

Accessibilité

`label` nomme le graphique (role=img). Chaque colonne est résumée dans une liste accessible avec sa catégorie et sa valeur ; le SVG décoratif reste aria-hidden.

Notes d'usage

Les valeurs non finies ou ≤ 0 sont écartées : un triangle posé sur l'axe X n'a de sens que pour une valeur strictement positive. Fournissez `tone` pour fixer la teinte par défaut des colonnes sans `tone` propre.

Tokens

--st-semantic-data-category1 ... --st-semantic-data-category8
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-inverse