Composant · Données

HollowCandlestickChart

Documenté

HollowCandlestickChart visualise des données OHLC (Open / High / Low / Close) sous forme de chandeliers creux (convention hollow candlestick). La couleur du trait suit la clôture par rapport à la clôture précédente : verte si elle monte, rouge si elle descend. Le corps est creux quand la bougie est haussière (close ≥ open) et plein quand elle est baissière (close < open).

Exemples

Semaine de trading

Cinq bougies quotidiennes. La mèche couvre high et low ; le corps relie open et close, creux ou plein selon le sens de la bougie.

Semaine de trading

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

Voir le code (Svelte)

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

API du composant

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

HollowCandlestickChartDatum = { label: string; open: number; high: number; low: number; close: number }

Accessibilité

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

Notes d'usage

La couleur dépend de la clôture vs la clôture précédente, le remplissage (creux/plein) dépend de close vs open : les deux dimensions sont indépendantes. Garantissez `high ≥ max(open, close)` et `low ≤ min(open, close)` ; le composant clampe silencieusement les valeurs invalides.

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