Composant · Données

RenkoChart

Stable

Briques Renko (façon Highcharts Stock « renko »). À partir d'une série de prix, on empile des briques d'une taille fixe boxSize en ignorant le temps régulier : une brique n'apparaît qu'au franchissement de boxSize. Brique haussière = +boxSize au-dessus, brique baissière = -boxSize ; l'inversion exige 2×boxSize. Vert (hausse) / rouge (baisse) via les tons sémantiques. Axe Y prix gradué, pas d'axe temps régulier. Liste accessible des briques hors SVG.

Exemples

Une série de prix qui monte puis redescend, brique de 5 : les colonnes vertes empilent la hausse, les rouges la baisse — le temps régulier est ignoré.

Cours

▲ 104 → 109
▲ 109 → 114
▲ 114 → 119
▲ 119 → 124
▲ 124 → 129
▲ 129 → 134
▲ 134 → 139
▲ 139 → 144
▲ 144 → 149
▲ 149 → 154
▼ 144 → 149
▼ 139 → 144
▼ 134 → 139
▼ 129 → 134
▼ 124 → 129

Voir le code (Svelte)

<div class="docs-renko-box">
  <RenkoChart
    label="Cours"
    boxSize={5}
    width={640}
    height={320}
    data={[{"date":0,"close":104},{"date":1,"close":110},{"date":2,"close":113},{"date":3,"close":121},{"date":4,"close":126},{"date":5,"close":124},{"date":6,"close":131},{"date":7,"close":140},{"date":8,"close":144},{"date":9,"close":150},{"date":10,"close":153},{"date":11,"close":158},{"date":12,"close":154},{"date":13,"close":147},{"date":14,"close":144},{"date":15,"close":138},{"date":16,"close":136},{"date":17,"close":131},{"date":18,"close":135},{"date":19,"close":127},{"date":20,"close":124},{"date":21,"close":130},{"date":22,"close":132},{"date":23,"close":127}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`RenkoChartDatum[]`	`[]`	Série de prix : { date, close }.
`boxSize`	`number`	auto	Taille d'une brique (défaut auto ~ (max-min)/20).
`label`	`string`	–	Libellé accessible du graphe.
`width`	`number`	`640`	Largeur du viewBox SVG.
`height`	`number`	`320`	Hauteur du viewBox SVG.
`class`	`string`	–	Classe CSS supplémentaire sur la racine.

RenkoChartDatum = { date: number; close: number } : les points non finis sont écartés ; le temps régulier est ignoré (une brique par franchissement de boxSize).

Tokens CSS

Variable CSS	Description
`--st-semantic-border-subtle`	Couleur des axes et de la grille.
`--st-semantic-feedback-success`	Brique haussière.
`--st-semantic-feedback-error`	Brique baissière.
`--st-semantic-surface-inverse`	Fond de l'infobulle au survol.