Divi graf

Divi 5 Native-modul

Smukke diagrammer
forDivi 5

Tilføj forbløffende, interaktive datavisualiseringer til enhver Divi-side - ingen kodning påkrævet. Drevet af Chart.js, fuldt lydhør og dybt integreret med Divi 5 Visual Builder.

8Diagramtyper
3Datasæt pr. diagram
8Skivefarvevælgere
100 %Visuel Builder Preview

Hvert diagram du nogensinde får brug for

Fra klassiske søjlediagrammer til radardiagrammer,Divi grafgiver dig otte forskellige visualiseringstyper ud af boksen.

📊

Søjle (kolonne)

Klassiske lodrette streger, ideelle til at sammenligne kategorier side om side.

📉

Bar (vandret)

Flippede bjælker til lange etiketter eller rangeringer - let læsbare.

📈

Linje

Spor trends over tid med glatte linjediagrammer med flere datasæt.

🌊

Areal

Udfyldte linjediagrammer, der understreger volumen og kumulative værdier.

🥧

Pie

Vis proportioner med et blik med fuldt tilpasselige skivefarver.

🍩

Donut

Et moderne twist på kagen - fantastisk til dashboards og KPI-skærme.

🕸️

Radar

Sammenlign flere attributter på tværs af flere datasæt på et enkelt spindelvæv.

🎯

Polar Area

Radial segments sized by value — striking, data-rich, and unique.

Everything you need, nothing you don't

🎨

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.

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

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.

✅ Divi 5 (Divi Builder 5.x)
✅ WordPress 6.0+
✅ PHP 7.4+
✅ Chart.js 4.4 (loaded via CDN)
❌ No Divi 4 / Legacy Builder support
Dansk