Composant · Données

CandlestickChart

Documenté

CandlestickChart visualise des données OHLC (Open / High / Low / Close) sous forme de bougies japonaises. Les bougies haussières sont vertes, les baissières rouges.

Exemples

Semaine de trading

Cinq bougies quotidiennes. Les bâtons (mèches) indiquent high et low ; les corps indiquent open et close.

Semaine de trading

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

Voir le code (Svelte)

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

API du composant

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

CandlestickChartDatum = { 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

Garantissez `high ≥ max(open, close)` et `low ≤ min(open, close)`. Le composant corrige silencieusement les bougies invalides en clampant high/low.

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