Divi-grafiek
Mooie grafieken
voorDivisie 5
Voeg verbluffende, interactieve datavisualisaties toe aan elke Divi-pagina – geen codering vereist. Mogelijk gemaakt door Chart.js, volledig responsief en diep geïntegreerd met de Divi 5 Visual Builder.
Grafiektypen
Elke grafiek die u ooit nodig zult hebben
Van klassieke staafdiagrammen tot radardiagrammen,Divi-grafiekbiedt u acht verschillende soorten visualisaties, kant-en-klaar.
Staaf (kolom)
Klassieke verticale balken, ideaal om categorieën naast elkaar te vergelijken.
Balk (horizontaal)
Omgedraaide balken voor lange labels of ranglijsten: moeiteloos leesbaar.
Lijn
Houd trends in de loop van de tijd bij met vloeiende lijndiagrammen met meerdere datasets.
Gebied
Gevulde lijndiagrammen die de nadruk leggen op volume en cumulatieve waarden.
Taart
Toon verhoudingen in één oogopslag met volledig aanpasbare segmentkleuren.
Donut
Een moderne draai aan taart: ideaal voor dashboards en KPI-displays.
Radar
Vergelijk meerdere attributen uit verschillende datasets op één spinnenweb.
Poolgebied
Radiale segmenten op basis van waarde: opvallend, rijk aan gegevens en uniek.
Waarom ervoor kiezen
Alles wat je nodig hebt, niets wat je niet nodig hebt
Live Visual Builder Preview
Every change you make in the Divi 5 panel is reflected instantly in the canvas — no page refresh, no guesswork.
8 Individual Slice Color Pickers
Pie, Donut and Polar Area charts let you set a distinct colour for each slice via native Divi colour pickers — consistent between editor and frontend.
Up to 3 Datasets
Overlay multiple data series on Bar, Line, Area and Radar charts for rich, comparative visualisations.
Fully Responsive
Charts resize fluidly on any screen size. Set your preferred height in pixels and Chart.js handles the rest.
Smooth Animations
Configurable animation duration (0–3000 ms) creates a polished reveal effect every time the chart enters the viewport.
Interactive Legend
Click any legend item to show or hide that dataset. Pointer cursor feedback makes discoverability obvious for end users.
Axis Labels
Add descriptive X and Y axis labels directly from the Design panel to give your data the context it deserves.
100% WordPress Standards
PHPCS-clean code following the WordPress coding standard, PSR-4 autoloading, and zero legacy Divi module API — built for the long term.
Module Settings
Deep customisation, zero complexity
All settings live inside the familiar Divi panel, organised into clear groups so you always know where to look.
Chart Settings
- Chart type (8 options)
- Chart title
- Category labels (comma-separated)
Slice Colors
- 8 individual color pickers
- Applied to Pie, Donut & Polar Area
- Consistent VB ↔ frontend rendering
Dataset 1
- Label, values (comma-separated)
- Color picker
- Fill opacity (Line & Area)
Datasets 2 & 3 (Optional)
- Toggle on/off independently
- Label, values, color picker
- Stacks on Bar, Line, Area, Radar
Chart Style
- Height (150 – 900 px)
- Background color
- Show / hide legend + position
- Show / hide grid lines
- Animation duration (ms)
- Border / line width (px)
- Point radius (Line & Area)
Axis Labels
- X-axis label text
- Y-axis label text
Requirements
Works right out of the box
Install, activate, and drag the Graph & Chart module into any Divi 5 page. No extra libraries to install — Chart.js is loaded automatically from CDN.
