Composant · Données

PointAndFigureChart

Stable

Point & Figure (façon Highcharts Stock « pointandfigure »). Des colonnes de X (hausse) ou de O (baisse) selon le mouvement de prix, calées sur une grille de boxSize. On change de colonne quand le prix recule d'au moins reversal×boxSize en sens inverse. X = ton success, O = ton error. Axe Y prix gradué, pas d'axe temps régulier. Liste accessible des colonnes hors SVG.

Exemples

Une série de prix qui alterne hausses et baisses, case de 5 et inversion à 3 : les colonnes de X marquent les poussées, les colonnes de O les replis.

Cours

X 100 → 150
O 100 → 145
X 105 → 145
O 110 → 140
X 115 → 130

Voir le code (Svelte)

<div class="docs-pnf-box">
  <PointAndFigureChart
    label="Cours"
    boxSize={5}
    reversal={3}
    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":133},{"date":6,"close":142},{"date":7,"close":146},{"date":8,"close":140},{"date":9,"close":128},{"date":10,"close":120},{"date":11,"close":114},{"date":12,"close":105},{"date":13,"close":100},{"date":14,"close":107},{"date":15,"close":118},{"date":16,"close":126},{"date":17,"close":132},{"date":18,"close":141},{"date":19,"close":133},{"date":20,"close":119},{"date":21,"close":113},{"date":22,"close":120},{"date":23,"close":129}]}
  />
</div>

API du composant

Prop	Type	Défaut	Description
`data`	`PointAndFigureChartDatum[]`	`[]`	Série de prix : { date, close }.
`boxSize`	`number`	auto	Taille d'une case (défaut auto ~ (max-min)/20).
`reversal`	`number`	`3`	Nombre de cases pour inverser de colonne.
`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.

PointAndFigureChartDatum = { date: number; close: number } : les points non finis sont écartés ; le temps régulier est ignoré (grille de boxSize, inversion à reversal cases).

Tokens CSS

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