Graphique d'écart

Comparaison

À quel point les deux chiffres qui comptent sont-ils éloignés ? Tracez avant et après, cible et réel, hommes et femmes, et la barre entre eux est l'histoire - plus l'écart est large, plus fort il résonne.

Example

canvas · responsive

Aller plus loin : Guide Insights·Guide DevTools

Le graphique ci-dessus est le même moteur dans chaque framework - seul le code d'intégration ci-dessous diffère.

Quand le choisir

• Cible contre réel, avant contre après, prévision contre résultat. Deux valeurs par ligne où la distance entre elles est le message principal - la barre d'écart EST la conclusion.
• Classer par écart. Triez les lignes et les plus belles réussites (ou les pires échecs) ressortent instantanément - conçu pour la revue du lundi matin : qui a comblé son écart ?
• Si les valeurs absolues comptent plus que la différence, des sous-barres côte à côte sur une barre comparable gardent les deux grandeurs lisibles.

Données volumineuses sur WebGPU Expérimental

GapChart dispose d'un renderer="webgpu" optionnel qui peint les marqueurs value1/value2 et les barres de connexion comme des formes instanciées sur le GPU tandis que les axes, étiquettes et infobulles restent sur la couche SVG. C'est conditionné par les capacités du navigateur : sur un navigateur sans WebGPU, il rétrograde automatiquement vers canvas, et getContext().renderer indique lequel a effectivement peint.

⚗️ Experimental - not yet stable. WebGPU rendering is an opt-in preview. It needs a WebGPU-capable browser (Chrome / Edge, or Safari 26+); everywhere else it falls back to canvas automatically. Axes, labels and tooltips stay on the SVG layer - only the data marks are painted on the GPU.

Heavy-data demo · ~195 pays… detecting

Faire defiler les annees

Donnez un date à chaque ligne et activez timeline : le graphique devient un récit année par année, avec son propre bouton lecture et son curseur, un instantané à la fois. Désactivé par défaut - sans opt-in, rien ne change.

Appuyez sur le bouton lecture sous le graphique : les données défilent année par année, un instantané à la fois. Faites glisser le curseur pour sauter à une année.

React

const ref = useRef<GapChartHandle>(null);

<GapChart ref={ref} {...props} timeline={{ speedMs: 1000, loop: true }} />;
// ref.current?.timeline() -> play() / pause() / seek(year) / stepForward()

Vue

<GapChart :options="{ ...props, timeline: { speedMs: 1000, loop: true } }" />

Svelte

<div use:gapChart={{ ...props, timeline: { speedMs: 1000, loop: true } }}></div>

Angular

applyGapChartProps(this.c.nativeElement, { ...props, timeline: { speedMs: 1000, loop: true } });

Web component

<michi-vz-gap-chart id="c"></michi-vz-gap-chart>
<script>
  const el = document.getElementById("c");
  el.timeline = { speedMs: 1000, loop: true };
  // el.getTimeline() -> play() / pause() / seek(year)
</script>

• speedMs règle le rythme, loop reboucle, autoplay: true démarre au montage, showControl: false masque la barre intégrée.
• Les valeurs glissent d'une période à l'autre par défaut (interpolate) ; ajustez le mouvement avec tweenMs et easing, ou passez interpolate: false pour des coupes nettes. Avec reduced motion, la coupe est toujours nette.
• Le contrôleur headless reste disponible : chart.timeline() expose play() / pause() / toggle() / seek(period) / stepForward() / stepBack(), plus onStep et formatPeriod dans la config pour une UI maison.
• Un filter (top-N, tri) s'applique toujours à l'intérieur de chaque période : un « top 5 par an » fonctionne d'emblée.
• Les lignes sans date restent visibles à chaque période.

Usage

React

import { GapChart } from "@michi-vz/react";

export default () => <GapChart {...props} />; // props = the chart options

Vue

<script setup>
import { GapChart } from "@michi-vz/vue";
</script>

<template>
  <GapChart :options="props" />
</template>

Svelte

<script>
  import { gapChart } from "@michi-vz/svelte";
</script>

<div use:gapChart={props}></div>

Angular

// main.ts - register the elements once
import "@michi-vz/angular";
import { applyGapChartProps } from "@michi-vz/angular";

// component (uses CUSTOM_ELEMENTS_SCHEMA)
// template: <michi-vz-gap-chart #c></michi-vz-gap-chart>
applyGapChartProps(this.c.nativeElement, props);

Web component

<script type="module" src="https://cdn.jsdelivr.net/npm/@michi-vz/wc/dist/michi-vz-wc.bundle.js"></script>

<michi-vz-gap-chart id="c"></michi-vz-gap-chart>
<script>
  Object.assign(document.getElementById("c"), props); // dataSet/series, title, …
</script>

Vanilla JS

import { mountGapChart } from "@michi-vz/core";

const chart = mountGapChart(el, props);
chart.update(next);
chart.getContext(); // renderer-agnostic, LLM-ready
chart.destroy();

API

Les props sont typées comme GapChartProps dans @michi-vz/core. Communes à tous les graphiques : width, height, margin, colors / colorsMapping, renderer ("svg", "canvas", ou expérimentalement "webgpu"), highlightItems, disabledItems, et les callbacks on*. onChartDataProcessed / getContext() renvoient le ChartContext agnostique du moteur de rendu.