BjChartBar

Graphique en barres Vue : vertical par défaut, horizontal avec horizontal, échelle maxValue, valeurs showValues, couleurs par barre via color.

Utilisation

<script setup>
import { BjChart, BjChartBar } from '@flrxnt/dsbj/vue'

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

<template>
  <BjChart title="Visiteurs">
    <BjChartBar :data="data" />
  </BjChart>
</template>

Barres verticales et couleurs

Chaque entrée peut définir color ; sinon la couleur du thème s’applique via les styles CSS.

Visiteurs

Barres horizontales

Les libellés sont à gauche, la piste au centre, les valeurs à droite lorsque show-values est vrai.

Parts

Mode horizontal

<BjChart title="Parts de marché">
  <BjChartBar :data="data" horizontal />
</BjChart>

Sans valeurs affichées

:show-values="false" masque les pastilles numériques au-dessus ou à droite des barres.

Sans nombres

<BjChartBar :data="data" :show-values="false" />

Échelle maxValue

max-value fixe le dénominateur des pourcentages (barres plus courtes si la valeur max dépasse les données).

Échelle 200

<BjChartBar :data="data" :max-value="200" />

Combinaison : horizontal + maxValue + showValues

Exemple combinant barres horizontales, une échelle imposée et l’affichage des valeurs.

Horizontal + max 120

<BjChartBar
  :data="data"
  horizontal
  :max-value="120"
/>

Props

PropDescription
dataTableau <code class="bj-code">{ label, value, color? }</code> (obligatoire).
horizontalPasse en disposition <code class="bj-code">bj-chart-bar--horizontal</code>.
maxValueMaximum de l’échelle ; par défaut le max des <code class="bj-code">value</code>.
showValuesAffiche les nombres (défaut : <code class="bj-code">true</code>).
…Attributs sur la racine <code class="bj-code">&lt;div&gt;</code> (ex. <code class="bj-code">aria-label</code>).