BjChartLine

Graphique en lignes Vue : plusieurs séries, hauteur SVG, aire sous courbe, points et grille optionnels. Les libellés d’axe proviennent de la première série.

Utilisation

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

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

<template>
  <BjChart title="Tendances">
    <BjChartLine :series="series" show-area />
  </BjChart>
</template>

Courbe simple

Par défaut : points et grille visibles, pas d’aire.

Aire sous la courbe (showArea)

show-area remplit la zone sous chaque série (opacité CSS).

Sans points (showDots)

:show-dots="false" conserve le tracé sans cercles.

<BjChartLine :series="series" :show-dots="false" />

Sans grille (showGrid)

:show-grid="false" supprime les lignes horizontales de fond.

<BjChartLine :series="series" :show-grid="false" />

Hauteur personnalisée

height contrôle le viewBox vertical du SVG (défaut 200).

<BjChartLine :series="series" :height="280" />

Plusieurs séries

Chaque série partage le même axe X : les tableaux data doivent avoir les mêmes label dans le même ordre.

Entrées Sorties

<BjChartLine :series="seriesMulti" />

Combinaison : aire + grille + hauteur

Exemple avec aire, grille active, hauteur 240 px et deux séries.

<BjChartLine
  :series="seriesMulti"
  show-area
  :height="240"
/>

Props

Prop	Description
`series`	<code class="bj-code">{ name, color?, data: { label, value }[] }[]</code>.
`height`	Hauteur du SVG en px (défaut : 200).
`showArea`	Affiche le remplissage sous la ligne.
`showDots`	Affiche les points (défaut : <code class="bj-code">true</code>).
`showGrid`	Affiche la grille (défaut : <code class="bj-code">true</code>).
`…`	Attributs sur le conteneur <code class="bj-code">.bj-chart-line</code>.