Composant · Données

OHLCChart

Documenté

OHLCChart visualise des données OHLC (Open / High / Low / Close) sous forme de bâtons financiers : une barre verticale du low au high, un tick à gauche au niveau de l'ouverture et un tick à droite au niveau de la clôture. Les périodes haussières sont vertes, les baissières rouges.

Exemples

Semaine de trading

Cinq bâtons quotidiens. La barre verticale couvre high et low ; le tick gauche marque open, le tick droite marque 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">
  <OHLCChart
    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>

Annotations, étiquettes et navigation clavier

Une ligne de résistance et une zone de prix (annotations), l'étiquette close au-dessus de chaque bâton (dataLabels) et la navigation clavier des bâtons (←/→, Entrée). Le crosshair se pilote via hoverKey/onHoverKeyChange.

Annotations, étiquettes et navigation clavier

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
Annotation: Résistance
Annotation: Support

Voir le code (Svelte)

<div class="chart-wrapper">
  <OHLCChart
    label="Cours SENT : analyse"
    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}]}
    dataLabels
    keyboardNav
    annotations={[{"kind":"line","axis":"y","value":151,"label":"Résistance"},{"kind":"region","axis":"y","from":138,"to":142,"label":"Support"}]}
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`OHLCChartDatum[]`	requis
`label`	`string`	requis
`width`	`number`	`480`
`height`	`number`	`240`
`annotations`	`ChartAnnotation[]`	optionnel
`dataLabels`	`boolean \| { format?, position? }`	`false`
`hoverKey`	`string \| null`	optionnel
`onHoverKeyChange`	`(key: string \| null) => void`	optionnel
`keyboardNav`	`boolean`	`false`
`onSelectKey`	`(key: string \| null) => void`	optionnel
`class`	`string`	optionnel

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

Accessibilité

`label` alimente le conteneur `role="img"`. Chaque bâton 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 bâtons invalides en clampant high/low.

Tokens

--st-semantic-feedback-success
--st-semantic-feedback-error
--st-semantic-feedback-info
--st-semantic-border-subtle
--st-semantic-border-strong
--st-semantic-border-interactive
--st-semantic-text-primary
--st-semantic-text-secondary
--st-semantic-surface-default
--st-semantic-surface-inverse
--st-semantic-text-inverse
--st-radius-sm