Balkendiagramm erstellen und in WordPress einbinden: sechs Wege

0
(0)

Balkendiagramm erstellen und in WordPress einbinden: sechs Wege

Inhalt

Ein Balkendiagramm ist die ehrlichste Art, Zahlen zu zeigen: Länge vergleicht das Auge sofort. Umsatz pro Quartal, Besucher pro Seite, Antworten aus einer Umfrage. Dafür brauchst du kein teures Programm, aber du musst wissen, wie das Diagramm später auf deine WordPress-Seite kommt.

Genau da entscheidet sich nämlich, welches Werkzeug passt. Manche Dienste liefern nur ein Bild, andere einen Einbettungscode, wieder andere ein Plugin, das das Diagramm direkt im Editor erzeugt. Ich gehe sechs Wege durch, vom Plugin bis zum eigenen Code, und sage, für wen sie sich lohnen.

Kurz zur Quelle: Preise und Funktionen stammen von den Herstellerseiten, die Plugin-Zahlen aus dem Verzeichnis auf wordpress.org. Stand ist Oktober 2026.

Zuerst: Wann passt ein Balkendiagramm?

Balken zeigen Vergleiche zwischen Gruppen: Produkte, Monate, Länder, Antwortmöglichkeiten. Für Entwicklungen über längere Zeit ist eine Linie meist besser, für Anteile an einem Ganzen reichen oft zwei, drei Balken oder eine Tabelle. Ein paar Regeln, die ich bei fast jedem Diagramm anwenden würde:

  • Die Achse beginnt bei null. Alles andere lässt kleine Unterschiede dramatisch aussehen.
  • Sortiere nach Größe, außer die Reihenfolge hat eine Bedeutung wie bei Monaten.
  • Lange Beschriftungen? Dreh das Diagramm auf liegende Balken, dann musst du nichts schräg lesen.
  • Eine Farbe reicht. Hebe nur den Balken hervor, um den es in deinem Text geht.
  • Schreib die Kernaussage in die Überschrift, nicht nur „Umsatz 2026“.

Die Übersicht

Weg Kostenlos? Ergebnis auf der Seite Gut für
Visualizer (WordPress-Plugin) ja, Pro optional Diagramm direkt im Beitrag alles in WordPress
Datawrapper ja, mit Hinweis „Created with Datawrapper“ Einbettung oder PNG saubere Diagramme ohne Aufwand
Flourish ja, veröffentlicht öffentlich Einbettung animierte, bewegliche Diagramme
Google Tabellen ja Bild oder Einbettung wer ohnehin dort rechnet
Excel oder LibreOffice je nach Lizenz Bild einmalige Grafik
Chart.js ja (MIT-Lizenz) selbst gebauter Code Entwickler

Im Editor: Visualizer

Visualizer von Themeisle erzeugt Diagramme und Tabellen direkt in WordPress. Das Plugin hat rund 20.000 aktive Installationen, eine Bewertung von 4,4 von 5 bei 225 Stimmen, wurde im Oktober 2026 aktualisiert und ist mit WordPress 7.1 getestet. In der kostenlosen Version bekommst du vier Typen: Tabelle, Kreis, Linie und Balken. Weitere Typen wie Fläche, Blase oder Radar gehören zur Pro-Version. Der Titel im Verzeichnis nennt außerdem einen KI-Diagrammersteller.

Der Vorteil: Du bleibst im gewohnten Editor und musst weder ein Konto bei einem Fremddienst anlegen noch Einbettungscode kopieren. Für die meisten kleinen Seiten ist das mein Standardweg. Ob die Daten dabei an Server des Herstellers gehen, etwa bei der KI-Funktion, solltest du in den Einstellungen und in der Datenschutzerklärung des Plugins prüfen.

Datawrapper: schlicht und sauber

Datawrapper sitzt in Berlin. Im kostenlosen Tarif kannst du Diagramme, Karten und Tabellen erstellen, veröffentlichen und einbetten sowie als PNG herunterladen. Dafür bleibt der Hinweis „Created with Datawrapper“ am Diagramm. Pro kostet 21 US-Dollar pro Nutzer und Monat netto und entfernt den Hinweis, dazu kommen PDF- und SVG-Export. Auf der Preisseite ist offen, ob die Zahl für monatliche oder jährliche Zahlung gilt.

Zum Datenschutz sagt der Anbieter, Einbettungen würden keine Cookies setzen und keine Leser verfolgen, und IP-Adressen würden verarbeitet, aber nicht gespeichert. Wo die Dienste hosten, nennt die Preisseite nicht. Das ist eine Herstellerangabe. Prüf sie, bevor du dich darauf verlässt.

Wie das Diagramm auf deine Seite kommt: Du kopierst den Einbettungscode von Datawrapper und fügst ihn als HTML in den Beitrag ein. WordPress filtert eingebettete iframes bei Benutzern, die kein uneingeschränktes HTML dürfen. Als Administrator klappt es normalerweise, bei Redakteuren kann es scheitern.

Flourish für Bewegung

Flourish ist der Dienst für Diagramme mit mehr Gestaltungsspielraum und Bewegung. Der Gratis-Tarif erlaubt unbegrenzt viele Projekte und alle Vorlagen, veröffentlicht wird aber öffentlich und mit Flourish-Hinweis. Einbettungen auf der eigenen Webseite ohne Hinweis gehören zum Tarif Publisher, den der Anbieter individuell verkauft. Preise stehen nicht auf der Seite. Für ein einfaches Balkendiagramm ist das zu viel Aufwand.

Google Tabellen, Excel und LibreOffice

Wer seine Zahlen ohnehin in Google Tabellen führt, markiert die Zellen und wählt „Einfügen“ → „Diagramm“. Die Hilfe von Google beschreibt das Erstellen sowie ein Veröffentlichen unter „Diagramme speichern oder veröffentlichen“. Bedenke dabei: Ein eingebettetes Diagramm lädt Inhalte von einem fremden Server. Das kann eine Einwilligung nötig machen. Sicherer ist der Weg über ein Bild: Diagramm herunterladen und wie jedes andere Foto in die Mediathek hochladen.

Genauso läuft es mit Excel oder LibreOffice: Diagramm bauen, als Bild speichern, hochladen. Das Ergebnis ist eine feste Grafik. Sie ist schnell gemacht, aber nicht interaktiv, und bei neuen Zahlen baust du sie neu. Vergiss nicht den Alternativtext, der den Inhalt in einem Satz beschreibt, und bei wichtigen Zahlen am besten eine kleine Tabelle darunter.

Chart.js für Entwickler

Chart.js ist eine freie JavaScript-Bibliothek unter MIT-Lizenz, die Diagramme auf eine Zeichenfläche im Browser malt. Wenn du Code schreibst oder jemand für dich schreibt, ist das der Weg ohne Abhängigkeit von einem Dienst. Für alle anderen lohnt der Aufwand nicht, denn mit Visualizer bekommst du dasselbe ohne eine Zeile Code.

Welchen Weg ich nehmen würde

  • Du willst alles in WordPress: Visualizer.
  • Du willst ein besonders ordentliches Ergebnis ohne Plugin: Datawrapper, mit dem Hinweis im Diagramm oder als Pro-Konto.
  • Du brauchst eine einzelne Grafik: Aus Tabellenkalkulation als Bild exportieren.
  • Du brauchst Animation: Flourish.

Fazit

Die Wahl der Software ist weniger wichtig als die Gestaltung: Nullpunkt, Sortierung, eine Farbe, klare Überschrift. Wer das beachtet, hat mit dem Gratis-Tarif oder einem kostenlosen Plugin schon ein besseres Diagramm als die meisten Präsentationen. Starte mit Visualizer oder Datawrapper, und mach dir erst Gedanken über Bezahlversionen, wenn dir eine bestimmte Funktion fehlt.

Häufige Fragen

Wie viele Balken sind zu viel?

Ab etwa zehn bis fünfzehn Balken wird es unübersichtlich. Fass kleine Werte zu „Sonstige“ zusammen oder zeig nur die obersten Plätze und verlinke die ganze Tabelle.

Wie sieht das Diagramm auf dem Handy aus?

Liegende Balken funktionieren mit langen Beschriftungen auf kleinen Bildschirmen am besten. Schau dir jedes Diagramm vor dem Veröffentlichen einmal auf dem Handy an.

Wie mache ich ein Diagramm barrierefrei?

Beschreib die Kernaussage in einem Satz im Text oder im Alternativtext und lege die Zahlen als kleine Tabelle darunter. So können auch Screenreader und Suchmaschinen mit den Daten etwas anfangen.

Bewerte diesen Beitrag:

0 / 5. Bewertungen: 0

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Das könnte dich auch interessieren...