Bar Chart - DSFR Chart

Le composant <bar-chart> permet de comparer des valeurs entre categories.

Attributs

Attribut	Type	Description
`x`	String	Labels en JSON : `'[["A", "B", "C"]]'`
`y`	String	Valeurs en JSON : `'[[10, 20, 30]]'`
`name`	String	Noms des series : `'["Serie 1"]'`
`selected-palette`	String	Palette de couleurs
`unit-tooltip`	String	Unite dans les tooltips
`horizontal`	Boolean	Barres horizontales
`stacked`	Boolean	Barres empilees
`highlight-index`	String	Index a mettre en avant

Exemples

1. Barres verticales simples

<bar-chart
  x='[["2020", "2021", "2022", "2023", "2024"]]'
  y="[[65, 72, 78, 85, 91]]"
  name='["Score RGAA"]'
  selected-palette="default"
  unit-tooltip="%">
</bar-chart>

2. Barres horizontales

<bar-chart
  x='[["Economie", "Education", "Culture", "Sante", "Justice"]]'
  y="[[87, 91, 95, 68, 83]]"
  horizontal="true"
  selected-palette="categorical"
  unit-tooltip="%">
</bar-chart>

3. Barres empilees (multi-series)

<bar-chart
  x='[["T1", "T2", "T3", "T4"]]'
  y="[[15, 19, 15, 13], [45, 40, 47, 41], [36, 32, 34, 44]]"
  name='["RGAA", "DSFR", "Performance"]'
  stacked="true"
  selected-palette="categorical">
</bar-chart>

4. Mise en avant de certaines barres

<bar-chart
  x='[["Jan", "Fev", "Mar", "Avr", "Mai", "Juin"]]'
  y="[[50, 70, 30, 90, 60, 80]]"
  selected-palette="neutral"
  highlight-index="[3]"
  unit-tooltip="k">
</bar-chart>

5. Palette sequentielle

<bar-chart
  x='[["A", "B", "C", "D", "E"]]'
  y="[[20, 40, 60, 80, 100]]"
  selected-palette="sequentialAscending">
</bar-chart>