Verschildiagram

Vergelijking

Hoe ver liggen de twee waarden die ertoe doen uit elkaar? Zet voor en na, doel en werkelijk, mannen en vrouwen uit, en de balk daartussen vertelt het verhaal - hoe breder het verschil, hoe luider het spreekt.

Example

canvas · responsive

Ga dieper: Insights-gids·DevTools-gids

De grafiek hierboven gebruikt in elk framework dezelfde engine - alleen de integratiecode hieronder verschilt.

Wanneer kies je deze

• Doel versus werkelijk, voor versus na, prognose versus uitkomst. Twee waarden per rij waarbij de afstand ertussen de hoofdboodschap is - de verschilbalk IS de bevinding.
• Rangschikken op verschil. Sorteer de rijen en de grootste overwinningen (of ergste missers) komen meteen naar boven - gemaakt voor het maandagochtendoverzicht van wie het gat heeft gedicht.
• Doen de absolute groottes er meer toe dan het verschil, dan houden naast elkaar geplaatste subbalken op een staafdiagram beide groottes leesbaar.

Zware datasets op WebGPU Experimenteel

GapChart heeft een optionele renderer="webgpu" die de value1/value2-markers en verbindende balken tekent als GPU-instanced vormen, terwijl assen, labels en tooltips op de SVG-laag blijven. Dit is capability-gated: in een browser zonder WebGPU schakelt het automatisch terug naar canvas, en getContext().renderer meldt welke renderer daadwerkelijk heeft getekend.

⚗️ 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 landen… detecting

Speel door de jaren heen

Geef elke rij een date en zet timeline aan: de grafiek wordt een verhaal per jaar, met een eigen afspeelknop en scrubber die telkens één periode toont. Standaard uit - zonder opt-in verandert er niets.

Druk op de afspeelknop onder de grafiek: de data stapt door de jaren, één momentopname per keer. Sleep de scrubber om naar een jaar te springen.

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 bepaalt het tempo, loop begint opnieuw, autoplay: true start bij mounten, showControl: false verbergt de ingebouwde balk.
• Waarden glijden standaard tussen periodes (interpolate); stem de beweging af met tweenMs en easing, of zet interpolate: false voor harde overgangen. Met reduced motion is de overgang altijd hard.
• De headless controller is altijd beschikbaar: chart.timeline() biedt play() / pause() / toggle() / seek(period) / stepForward() / stepBack(), plus onStep en formatPeriod in de config voor eigen UI.
• Een filter (top-N, sortering) blijft binnen elke periode gelden, dus een "top 5 per jaar" werkt meteen.
• Rijen zonder date blijven in elke periode zichtbaar.

Gebruik

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

Props zijn getypeerd als GapChartProps in @michi-vz/core. Gedeeld door alle grafieken: width, height, margin, colors / colorsMapping, renderer ("svg", "canvas", of experimenteel "webgpu"), highlightItems, disabledItems en de on*-callbacks. onChartDataProcessed / getContext() geven de renderer-onafhankelijke ChartContext terug.