Composant · Données

MarimekkoChart

Documenté

MarimekkoChart (Mekko) est une matrice dont la largeur de chaque colonne est proportionnelle au poids de la catégorie, et dont la hauteur de chaque segment reflète sa part au sein de cette catégorie. Parfait pour combiner part de marché et mix produit.

Exemples

Parts de marché par région

Largeur = volume régional, hauteur = distribution des segments au sein de la région.

Parts de marché par région

Europe, PME: 55% (colonne 45%)
Europe, Grands comptes: 30% (colonne 45%)
Europe, Startups: 15% (colonne 45%)
Amérique, PME: 40% (colonne 35%)
Amérique, Grands comptes: 50% (colonne 35%)
Amérique, Startups: 10% (colonne 35%)
Asie, PME: 30% (colonne 20%)
Asie, Grands comptes: 20% (colonne 20%)
Asie, Startups: 50% (colonne 20%)

Voir le code (Svelte)

<div class="chart-wrapper">
  <MarimekkoChart
    label="Parts de marché par segment"
    data={[{"label":"Europe","width":45,"segments":[{"label":"PME","value":55,"tone":"category1"},{"label":"Grands comptes","value":30,"tone":"category2"},{"label":"Startups","value":15,"tone":"category3"}]},{"label":"Amérique","width":35,"segments":[{"label":"PME","value":40,"tone":"category1"},{"label":"Grands comptes","value":50,"tone":"category2"},{"label":"Startups","value":10,"tone":"category3"}]},{"label":"Asie","width":20,"segments":[{"label":"PME","value":30,"tone":"category1"},{"label":"Grands comptes","value":20,"tone":"category2"},{"label":"Startups","value":50,"tone":"category3"}]}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`MarimekkoChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`300`
`class`	`string`	optionnel

MarimekkoChartDatum = { label: string; width: number; segments: MarimekkoChartSegment[] } · MarimekkoChartSegment = { label: string; value: number; tone?: MarimekkoChartTone } · MarimekkoChartTone = "category1" | ... | "category8"

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque cellule expose sa catégorie, son segment, son pourcentage et la part de colonne dans une liste accessible hors SVG.

Notes d'usage

Les valeurs de `segments[].value` sont normalisées en % de la colonne : vous pouvez fournir des valeurs brutes ou des pourcentages. Les `width` sont relatifs entre eux.

Tokens

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