Chart

Die Chart-Komponente stellt einen responsiven Container für Diagramme bereit.
DK97 UI liefert dabei nur Layout und Styling. Die eigentliche Diagramm-Darstellung erfolgt über eine externe Bibliothek wie Chart.js.

Beispiele

Basic

Ein einfacher Chart-Container mit einem Canvas-Element.


<div class="m-chart">
    <canvas></canvas>
</div>

Inside Card

Empfohlene Verwendung innerhalb einer Card.


<div class="m-card">
    <div class="m-card__header">
        <h3 class="m-card__title">
            Temperaturverlauf
        </h3>
    </div>

    <div class="m-card__body">
        <div class="m-chart">
            <canvas id="temperature-chart"></canvas>
        </div>
    </div>
</div>

Dashboard Example

Beispielhafte Kombination mit Stat Cards und Chart Card für eine Dashboard-Ansicht.

Temperatur

18.5 °C

Luftfeuchtigkeit

67 %


<div class="o-stat-grid">
    <div class="m-stat-card">
        <div class="m-stat-card__label">
            Temperatur
        </div>

        <div class="m-stat-card__value">
            18.5 °C
        </div>
    </div>

    <div class="m-stat-card">
        <div class="m-stat-card__label">
            Luftfeuchtigkeit
        </div>

        <div class="m-stat-card__value">
            67 %
        </div>
    </div>
</div>

<div class="m-card">
    <div class="m-card__header">
        <h3 class="m-card__title">
            Temperaturverlauf 24h
        </h3>
    </div>

    <div class="m-card__body">
        <div class="m-chart">
            <canvas id="temperature-history-chart"></canvas>
        </div>
    </div>
</div>

Klassen

Klasse	Beschreibung
`.m-chart`	Responsiver Container für Diagramme.
`<canvas>`	Zeichenfläche für die externe Diagrammbibliothek.

Hinweise

DK97 UI stellt nur den Container für Diagramme bereit. Die eigentliche Darstellung erfolgt durch eine externe Bibliothek wie Chart.js.

Best Practices

Platziere Diagramme innerhalb einer Card, wenn sie als eigenständiger Inhaltsblock dargestellt werden sollen.

Diagrammlogik sollte nicht Teil von DK97 UI sein. Das Framework sollte keine feste Abhängigkeit zu einer bestimmten Chart-Bibliothek haben.

Accessibility

Canvas-basierte Diagramme sind für assistive Technologien oft nicht direkt verständlich. Stelle wichtige Werte zusätzlich als Text, Tabelle oder Stat Cards bereit.