In diesem Tutorial wird erklärt, wie Du das Design eines Balkendiagramms anpassen kannst. Für diesen Schritt solltest Du bereits Daten für Dein eigenes Balkendiagramm hochgeladen oder die Beispieldaten aus dem ersten Tutorial „Wie erstelle ich ein Balkendiagramm mit 23?°“ verwendet haben. Unser Editor ermöglicht es Dir, Dein Diagramm mit Hilfe von verschieden Funktionen und Anpassungsmöglichkeiten zu optimieren. Hier zeigen wir Dir, wie Du in drei einfachen Schritten Dein Balkendiagramm verschönern kannst. Wir werden dabei drei Reiter durchgehen, die im Editor neben jedem Diagramm zu sehen sind, um das Aussehen unseres Diagramms zu verändern:

1. Titel Editor, 2. Farb Editor, 3. Diagramm Editor und 4. Tooltip Editor.

Bevor wir anfangen: am besten ist es, wenn Du während des Anpassens hin und wieder überprüfst, wie das Diagramm auf verschiedenen Bildschirmgrößen aussieht, indem du zwischen den vier kleinen Symbolen (Handy, Tablet & Notebook, Fullscreen) unter dem Diagramm hin und her wechselst. Um die Dimension des Diagrammfensters manuell zu bestimmen, schreibe die Werte direkt in die beiden Kästchen (Breite x Höhe).

I. Schriftdarstellung

Du wirst neben den meisten Elementen der einzelnen Editor-Bereiche ein A Symbol finden. Wenn Du dieses Symbol anklickst öffnen sich die Schriftdarstellung bzw. die Text–Einstellungen. Damit kannst Du die Schriftart, Farbe, Gewicht und Größe des Textes auswählen, einstellen, ob er linksbündig, zentriert oder rechtsbündig ausgerichtet sein soll und so weiter. Die Einstellungen funktionieren nach jenem Prinzip, das Du auch aus Standard Text-Editier Programmen kennst.

II. Werte formatieren

Zahlen in Diagrammen sollten immer leicht zu lesen und zu verstehen sein: dabei spielt das Format, in dem die Werte dargestellt werden, eine besonders wichtige Rolle. Durch einen Klick auf das x² Symbol, öffnest Du die Oberfläche, in der Du Werte formatieren kannst.
Hier kannst Du einstellen, ob die Werte als Abkürzung und gerundet (z.B 1.412.456 -> 1,4 Mio.) dargestellt werden sollen, ob Du die Ziffern gruppieren möchtest (z.B 1000000 -> 1.000.000) und, wieviele Dezimalstellen angezeigt werden sollen. Außerdem kannst Du ein Prä– bzw. Suffix anfügen, um die Einheit, die die Werte darstellen, klar zu definieren (z.B %, €, $, Kilogramm, Meter usw.). Überall dort, wo potenziell Werte angezeigt werden können, erscheint dieses x² Symbol. Im Chart Editor, in den Bereichen Werteachse und Werte im Diagramm, aber auch im Tooltip Editor, den wir hier ausführlicher erklären (Link).

Wenn Deine Grafik eine Zeitkomponente enthält, kannst du über das x² -Symbol auch die Datums-Formatierung festlegen.

1. Titel Editor

Titel, Untertitel, Quelle und Beschreibung werden grundsätzlich aus dem Dateneditor (link) übernommen. Du kannst sie, aber jederzeit anpassen und Dinge hinzufügen.

Im Titel Editor kannst Du den Titel und Untertitel Deiner Grafik festlegen. Weiters kannst Du in diesem Bereich die Quelle(n) der Grafik angeben und, falls nötig, Deiner Grafik in der Beschreibung weitere Informationen (z.B Erhebungszeitraum, Stichprobengröße, Link zur Datenquelle, etc.) hinzufügen. Eine weitere Möglichkeit bietet die Option deiner Grafik einen Filter hinzuzufügen. Zusätzliche Elemente wie das Logo oder den Button zur Weiterverwendung der Grafik kannst du hier ebenfalls editieren.

2. Farb Editor

Einer der wichtigsten Punkte bei der Erstellung einer Datenvisualisierung ist die Auswahl der Farben. Deshalb machen wir es euch so einfach wie möglich, Farben hinzuzufügen, zu entfernen, zu ändern oder sogar ganze Farbpaletten zu speichern.

Wenn du Farben für deine Visualisierung auswählst, gehst du immer von einer vordefinierten Farbpalette. Diese Palette kann jederzeit bearbeitet werden. Farbpaletten können auch abgespeichert werden und so immer wieder für Diagramme oder Karten angewendet werden. Klicke dazu einfach auf das Speicher-Symbol neben der Farbpalette im Farb Editor.

Wenn du das Diagramm nicht nach Werten, sondern nach Kategorien (d.h. Text, Geo, Zeit) einfärben möchtest, klicke auf das Dropdown-Menü Feld auswählen, oberhalb der Farbpalette und wähle das bevorzugte Feld (d.h die Spalte in deinem Datensatz) aus. In diesem Fall haben wir das Feld „Verkehrsteilnehmer“ ausgewählt.

Klicke nun einfach auf eine Farbe in der Farbpalette, um die Farbauswahl (Color Picker) zu öffnen. Dort hast du zwei Möglichkeiten, deine Farben zu bestimmen. Entweder über den Cursor in der Farbauswahl oder durch die Eingabe der Werte für RGB-, HSL- oder HEX-Farbmodelle. Durch einen Klick auf das + Symbol, kannst du der Palette neue Farben hinzufügen. Um Farben wieder aus der Palette zu entfernen, klicke auf das Papierkorb Symbol.

Unterhalb der Farbpalette findest du die Einstellungen. Hier sind alle, im ausgewählten Feld enthaltene Elemente aufgelistet und können durch einfaches Anklicken farblich zugeordnet werden. In unserem Fall: Auto, Bus, Radfahrer und Fußgänger

3. Diagramm Editor

Im initialen Zustand habt ihr eine Übersicht der Punkte, die ihr im einzelnen einstellen könnt. Nach Klick auf eine Überschrift kommt ihr zu den entsprechenden Einstellungsoptionen. Bei manchen Punkten ist es möglich, die komplette Anzeige bzw. Funktion über einen Schieberegler ein- oder auszuschalten. 

Legende

Hier können neben Format und Styling die maximale Legendenhöhe, die Legendenschriftskalierung sowie ein potentielles Scrolling der Legende eingestellt werden.

Sortieren

An dieser Stelle kann ausgewählt werden, ob und in welcher Weise die Diagramminhalte sortiert werden sollen. Sollen die Inhalte sortiert werden, kann eingestellt werden, nach welcher Spalte bzw. Variable des zugrunde liegenden Datensatzes sortiert werden soll. Darüber hinaus kann man einstellen, ob ab- oder aufsteigenden sortiert werden soll.

Werte im Diagramm

Hier gibt es einen WYSIWYG-Editor eingefügt, wie ihr ihn bereits z.B. von den Tooltips kennt. Es ist also möglich, die Darstellung der Werte im Diagramm nach den eigenen Wünschen zu gestalten.

Außerdem befinden sich unter diesem Punkt bei Balken-Diagrammen die Optionen zur Positionierung der Werte. Ihr könnt an dieser Stelle nicht nur entscheiden, ob die Werte außerhalb oder innerhalb der Balken angezeigt werden sollen, sondern auch, an welcher genauen Position (links oder rechts).  

Beschriftungsachse

Auch die Beschriftungsachse ist mit einem WYSIWYG-Editor versehen. Ihr habt also die Möglichkeit, die Achse und die abgebildeten Labels ganz nach euren Wünschen zu gestalten.

Hinter den “Erweiterten Einstellungen” findet ihr außerdem zum Beispiel die Möglichkeit, einen Achsentitel einzufügen oder eine maximale Zeilenanzahl (sinnvolll bei langen Labels) einzustellen.

Werteachse

Hier findet ihr neben der Wert- und Schriftformatierung der Werteachse die Einstellungen der Hilfslinien sowie die Auswahl des angezeigten Wertebereichs. 

Unter dem Punkt “Erweiterte Einstellungen” befinden sich die Optionen zur Platzierung sowie der Winkeleinstellung der Achse. Außerdem lassen sich hier der Achsentitel und die maximale Zeilenanzahl festlegen.

Markieren Sie die Nulllinie

Soll die Nulllinie besonders hervorgehoben werden, so lassen sich an dieser Stelle Farbe, Länge, Spalt und Breite einstellen.

Balken Darstellung

Hier lassen sich bei Balken-Diagrammen inneres und äußeres Balken- sowie Gruppen-Padding einstellen. Darüber hinaus lässt sich hier die minimale Balkenhöhe auswählen und festlegen, ob ein Scrolling der Balken je nach Viewport-Größe zugelassen werden soll.

Animationen anpassen

Unter diesem Punkt lassen sich die Dauer der gesamten Animation sowie die Verzögerung der Animationen der einzelnen Elemente zueinander festlegen.

Erweiterte Optionen

Bei den erweiterten Diagramm-Optionen kannst Du die Skalierung der Diagrammschriftart festlegen. Außerdem lassen sich an dieser Stelle der äußere Rand sowie der Innenrand einstellen.