Divi-graf

Divi 5 Native-modul

Vakre diagrammer
tilDivi 5

Legg til fantastiske, interaktive datavisualiseringer til enhver Divi-side – ingen koding kreves. Drevet av Chart.js, fullstendig responsiv og dypt integrert med Divi 5 Visual Builder.

8Diagramtyper
3Datasett per diagram
8Skivefargevelgere
100 %Visual Builder forhåndsvisning

Hvert diagram du noen gang trenger

Fra klassiske søylediagrammer til radardiagrammer,Divi-grafgir deg åtte forskjellige visualiseringstyper ut av esken.

📊

Bar (kolonne)

Klassiske vertikale stolper, ideelle for å sammenligne kategorier side ved side.

📉

Bar (horisontal)

Flippede stolper for lange etiketter eller rangeringer – lett lesbar.

📈

Linje

Spor trender over tid med jevne linjediagrammer med flere datasett.

🌊

Område

Utfylte linjediagrammer som understreker volum og kumulative verdier.

🥧

Pai

Vis proporsjoner med et blikk med fullt tilpassbare skivefarger.

🍩

Smultring

En moderne vri på kaken – flott for dashbord og KPI-skjermer.

🕸️

Radar

Sammenlign flere attributter på tvers av flere datasett på et enkelt edderkoppnett.

🎯

Polarområdet

Radiale segmenter dimensjonert etter verdi – slående, datarike og unike.

Alt du trenger, ingenting du ikke trenger

🎨

Live Visual Builder forhåndsvisning

Hver endring du gjør i Divi 5-panelet gjenspeiles umiddelbart i lerretet – ingen sideoppdatering, ingen gjetting.

🖌️

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
Norsk