Composant · Données

ComboChart

Stable

Graphique combiné barres + courbes avec double axe Y indépendant. Les barres sont regroupées par catégorie (axe gauche) ; les courbes superposées utilisent l'axe droit. Légende, tooltip au survol et liste de valeurs accessible inclus.

Exemples

Ventes et coûts trimestriels en barres groupées (axe gauche k$) superposés à la courbe de marge en pourcentage (axe droit). Lissage Bézier activé sur la courbe.

Ventes et marge par trimestre

Ventes (k$), T1: 120
Ventes (k$), T2: 145
Ventes (k$), T3: 160
Ventes (k$), T4: 190
Coûts (k$), T1: 80
Coûts (k$), T2: 95
Coûts (k$), T3: 105
Coûts (k$), T4: 120
Marge (%), T1: 33
Marge (%), T2: 34
Marge (%), T3: 34
Marge (%), T4: 37

Voir le code (Svelte)

<div class="chart-wrapper">
  <ComboChart
    label="Ventes et marge par trimestre"
    categories={["T1","T2","T3","T4"]}
    bars={[{"label":"Ventes (k$)","data":[120,145,160,190],"tone":"category1"},{"label":"Coûts (k$)","data":[80,95,105,120],"tone":"category3"}]}
    lines={[{"label":"Marge (%)","data":[33,34,34,37],"tone":"category5","smooth":true}]}
    leftAxisLabel="k$"
    rightAxisLabel="%"
    legend
    width={520}
    height={280}
  />
</div>

Étiquettes, annotations et navigation clavier

dataLabels imprime la valeur sur chaque barre et chaque point de courbe. annotations superpose une couche en espace données (région sur l'axe gauche, point sur une catégorie). keyboardNav ajoute un curseur clavier (roving tabindex) : une seule tabulation, flèches pour naviguer entre catégories, Entrée/Espace pour sélectionner, Échap pour sortir. hoverKey/onHoverKeyChange partagent le crosshair entre plusieurs graphiques alignés.

Étiquettes, annotation et navigation clavier

Ventes (k$), T1: 120
Ventes (k$), T2: 145
Ventes (k$), T3: 160
Ventes (k$), T4: 190
Marge (%), T1: 33
Marge (%), T2: 34
Marge (%), T3: 34
Marge (%), T4: 37
Annotation: Objectif
Annotation: Record

Voir le code (Svelte)

<div class="chart-wrapper">
  <ComboChart
    label="Ventes et marge : étiquettes, annotation et navigation clavier"
    categories={["T1","T2","T3","T4"]}
    bars={[{"label":"Ventes (k$)","data":[120,145,160,190],"tone":"category1"}]}
    lines={[{"label":"Marge (%)","data":[33,34,34,37],"tone":"category5","smooth":true}]}
    dataLabels
    annotations={[{"kind":"region","axis":"y","from":150,"to":200,"label":"Objectif"},{"kind":"point","x":"T4","y":190,"label":"Record"}]}
    keyboardNav
    leftAxisLabel="k$"
    rightAxisLabel="%"
    legend
    width={520}
    height={280}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`categories`	`string[]`	requis	Labels des catégories (axe X ordinale).
`label`	`string`	requis	Label aria-label du graphique (a11y).
`bars`	`ComboChartBarSeries[]`	`[]`	Séries de barres groupées (axe gauche).
`lines`	`ComboChartLineSeries[]`	`[]`	Séries de courbes superposées (axe droit).
`leftAxisLabel`	`string`	–	Label de l'axe Y gauche (barres).
`rightAxisLabel`	`string`	–	Label de l'axe Y droit (courbes).
`legend`	`boolean`	`true`	Affiche la légende des séries.
`hiddenSeries`	`string[]`	–	Séries masquées (légende interactive, contrôlée).
`onToggleSeries`	`(id) => void`	–	Émis au clic / Entrée / Espace sur un item de légende.
`annotations`	`ChartAnnotation[]`	–	Couche d'annotations (région/ligne/point/label/forme). x catégoriel, y sur l'axe gauche.
`dataLabels`	`boolean \| { format?; position? }`	aucune	Valeur sur chaque barre et chaque point de courbe (aria-hidden).
`hoverKey` / `onHoverKeyChange`	`string \| null` / `(key) => void`	–	Crosshair contrôlé sur la catégorie (canal de survol partagé).
`keyboardNav` / `onSelectKey`	`boolean` / `(key \| null) => void`	–	Navigation clavier des catégories (roving tabindex).
`width`	`number`	`480`	Largeur du viewBox SVG.
`height`	`number`	`240`	Hauteur du viewBox SVG.

ComboChartBarSeries = { label, data: number[], tone? } · ComboChartLineSeries = { label, data: number[], tone?, smooth? }

Tokens CSS

Variable CSS	Description
`--st-component-comboChart-gridStroke`	Couleur des lignes de grille (défaut : border-subtle).
`--st-component-comboChart-axisStroke`	Couleur des axes.
`--st-component-comboChart-labelColor`	Couleur des étiquettes d'axe.
`--st-component-comboChart-tooltipBackground`	Fond du tooltip.
`--st-component-comboChart-tooltipText`	Texte du tooltip.
`--st-semantic-data-category1…8`	Palette catégorielle pour barres et courbes.