Composant · Données

PolygonChart

Documenté

Polygone fermé rempli : relie une série de points x/y dans l'ordre fourni en une zone remplie (couleur tone à opacité réduite), avec contour et marqueurs aux sommets. Utile pour délimiter une zone ou un cluster. Deux axes numériques (graduations « jolies » automatiques), tooltip au survol et liste accessible des coordonnées hors SVG.

Exemple

Zone de couverture

x 2, y 1
x 6, y 2
x 8, y 6
x 5, y 8
x 1, y 5

Voir le code (Svelte)

<div class="docs-polygon-box">
  <PolygonChart
    data={[{"x":2,"y":1},{"x":6,"y":2},{"x":8,"y":6},{"x":5,"y":8},{"x":1,"y":5}]}
    label="Zone de couverture"
    tone="category2"
  />
</div>

API du composant

Prop	Type	Par défaut
`data`	`PolygonChartPoint[]`	requis
`label`	`string`	requis (a11y)
`tone`	`category1…8`	`category1`
`width` / `height`	`number`	`480` / `360`

PolygonChartPoint = { x, y } : les points sont reliés dans l'ordre fourni puis le contour est fermé (dernier → premier). Les coordonnées non finies sont filtrées ; le polygone n'est tracé qu'à partir de deux points valides.