Composant · Données

HLCChart

Documenté

HLCChart visualise des données HLC (High / Low / Close) sous forme de bâtons financiers : une barre verticale du low au high et un tick à droite au niveau de la clôture, sans tick d'ouverture (variante d'OHLC). Les périodes en hausse (close ≥ clôture précédente) sont vertes, celles en baisse rouges.

Exemples

Semaine de trading

Cinq bâtons quotidiens. La barre verticale couvre high et low ; le tick droite marque close. La couleur compare close à la clôture précédente.

Semaine de trading

Lun: H 148 L 139 C 146
Mar: H 151 L 144 C 149
Mer: H 152 L 140 C 143
Jeu: H 147 L 138 C 145
Ven: H 155 L 144 C 153

Voir le code (Svelte)

<div class="chart-wrapper">
  <HLCChart
    label="Cours SENT : semaine"
    data={[{"label":"Lun","high":148,"low":139,"close":146},{"label":"Mar","high":151,"low":144,"close":149},{"label":"Mer","high":152,"low":140,"close":143},{"label":"Jeu","high":147,"low":138,"close":145},{"label":"Ven","high":155,"low":144,"close":153}]}
  />
</div>

API du composant

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

HLCChartDatum = { label: string; high: number; low: number; close: number }

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque bâton expose ses valeurs H/L/C dans une liste accessible hors SVG.

Notes d'usage

Garantissez `high ≥ close` et `low ≤ close`. Le composant corrige silencieusement les bâtons invalides en clampant high/low. La première barre est considérée en hausse.

Tokens

--st-semantic-feedback-success
--st-semantic-feedback-error
--st-semantic-border-subtle
--st-semantic-text-secondary
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm