BjChartLine

Courbes React : props alignées sur Vue — series, height, showArea, showDots, showGrid.

Utilisation

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

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

export function Example() {
  return (
    <BjChart title="Tendances">
      <BjChartLine series={series} showArea />
    </BjChart>
  )
}

Courbe simple

Points et grille activés par défaut.

Aire (showArea)

Prop showArea pour le remplissage semi-transparent.

<path class="bj-chart-line__area" style="fill: #008751" d="M40,170 L40,60 L220,100 L400,40 L400,170 Z" />

Sans points

showDots={false}.

<BjChartLine series={series} showDots={false} />

Sans grille

showGrid={false}.

<BjChartLine series={series} showGrid={false} />

Hauteur

height={280} (nombre, pixels du viewBox).

<BjChartLine series={series} height={280} />

Plusieurs séries

Plusieurs <g> sont rendus ; même jeu de labels sur chaque série.

<BjChartLine series={seriesMulti} />

<!-- Deux couleurs de tracé -->
<g>
  <path class="bj-chart-line__path" style="stroke: #008751" d="M40,120 L220,80 L400,100" />
</g>
<g>
  <path class="bj-chart-line__path" style="stroke: #E8112D" d="M40,140 L220,130 L400,60" />
</g>

Combinaison

Aire + hauteur 240 + deux séries.

<BjChartLine series={seriesMulti} showArea height={240} />

Props

Prop	Description
`series`	Tableau de séries typées.
`height`	Hauteur SVG (défaut 200).
`showArea`	Aire sous les lignes.
`showDots`	Points (défaut true).
`showGrid`	Grille (défaut true).
`…`	Props supplémentaires sur le conteneur.