BjChartBar

Graphique en barres React : mêmes props que la version Vue (data, horizontal, maxValue, showValues).

Utilisation

import { BjChart, BjChartBar } from '@flrxnt/dsbj/react'

const data = [
  { label: 'Jan', value: 120, color: '#008751' },
  { label: 'Fév', value: 90, color: '#FCD116' },
  { label: 'Mar', value: 150, color: '#E8112D' },
]

export function Example() {
  return (
    <BjChart title="Visiteurs">
      <BjChartBar data={data} />
    </BjChart>
  )
}

Barres verticales et couleurs

Passez un tableau d’objets avec color optionnel pour surcharger la couleur de thème.

120

Jan

Fév

150

Mar

Barres horizontales

Prop booléenne horizontal pour la variante rangées / piste.

Jan

120

Fév

Mar

150

export function Example() {
  return (
    <BjChart title="Parts de marché">
      <BjChartBar data={data} horizontal />
    </BjChart>
  )
}

Sans valeurs affichées

showValues= masque les nombres.

Jan

Fév

<BjChartBar data={data} showValues={false} />

Échelle maxValue

maxValue force le dénominateur des pourcentages.

120

Jan

Fév

<BjChartBar data={data} maxValue={200} />

Combinaison : horizontal + maxValue + showValues

Les trois options peuvent se combiner sur un seul <BjChartBar />.

<BjChartBar data={data} horizontal maxValue={120} />

Props

Prop	Description
`data`	Tableau <code class="bj-code">BjChartBarItem[]</code>.
`horizontal`	Barres horizontales.
`maxValue`	Maximum d’échelle (optionnel).
`showValues`	Affiche les valeurs (défaut <code class="bj-code">true</code>).
`…`	Autres attributs du <code class="bj-code"><div></code> racine.