Chart.js

Chart.js ist eine einfache, aber flexible JavaScript-Chart-Bibliothek, die klare, responsive Charts mit flussigen Animationen erzeugt. Das Chart.js-Plugin von Moraya ermoglicht es Ihnen, Charts in Ihr Markdown einzubetten, indem Sie ein Standard-Chart.js-Konfigurationsobjekt in einem eingehegten Codeblock schreiben.

Syntax

Verwenden Sie den Sprach-Tag chartjs oder chart fur einen eingehegten Codeblock. Der Inhalt ist ein JSON-Objekt mit den Feldern type, data und optionalem options, das dem Chart.js-Konfigurations-Schema entspricht.

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["A", "B", "C"],
    "datasets": [{ "label": "Values", "data": [10, 20, 30] }]
  }
}
```

Sowohl chartjs als auch chart werden als Sprach-Tags unterstutzt und liefern identische Ergebnisse.

Beispiele

Balkendiagramm

Ein vertikales Balkendiagramm mit monatlichen Benutzeranmeldungen.

```chartjs
{
  "type": "bar",
  "data": {
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [
      {
        "label": "New Signups",
        "data": [1240, 1580, 1920, 1750, 2100, 2380],
        "backgroundColor": [
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)",
          "rgba(54, 162, 235, 0.7)"
        ],
        "borderColor": "rgba(54, 162, 235, 1)",
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Monthly User Signups" }
    },
    "scales": {
      "y": { "beginAtZero": true }
    }
  }
}
```

Horizontales Balkendiagramm

Ein horizontales Balkendiagramm zum Vergleich der Popularitat von Programmiersprachen.

```chart
{
  "type": "bar",
  "data": {
    "labels": ["Python", "JavaScript", "TypeScript", "Java", "Go", "Rust"],
    "datasets": [
      {
        "label": "Developer Survey (%)",
        "data": [48, 42, 35, 30, 18, 12],
        "backgroundColor": [
          "#3776ab",
          "#f7df1e",
          "#3178c6",
          "#ed8b00",
          "#00add8",
          "#ce422b"
        ]
      }
    ]
  },
  "options": {
    "indexAxis": "y",
    "plugins": {
      "title": { "display": true, "text": "Most Used Languages (2025)" },
      "legend": { "display": false }
    },
    "scales": {
      "x": { "beginAtZero": true, "max": 60 }
    }
  }
}
```

Liniendiagramm

Ein Liniendiagramm, das Server-Antwortzeiten uber 24 Stunden verfolgt.

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["00:00", "03:00", "06:00", "09:00", "12:00", "15:00", "18:00", "21:00"],
    "datasets": [
      {
        "label": "Response Time (ms)",
        "data": [45, 38, 42, 120, 185, 165, 140, 72],
        "borderColor": "rgb(75, 192, 192)",
        "backgroundColor": "rgba(75, 192, 192, 0.1)",
        "fill": true,
        "tension": 0.3
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "API Response Time (24h)" }
    },
    "scales": {
      "y": { "beginAtZero": true, "title": { "display": true, "text": "ms" } }
    }
  }
}
```

Kreisdiagramm

Ein Kreisdiagramm, das die Zeiteinteilung eines Projekts zeigt.

```chartjs
{
  "type": "pie",
  "data": {
    "labels": ["Development", "Testing", "Design", "Meetings", "Documentation"],
    "datasets": [
      {
        "data": [40, 20, 15, 15, 10],
        "backgroundColor": [
          "#36a2eb",
          "#ff6384",
          "#ffce56",
          "#4bc0c0",
          "#9966ff"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Sprint Time Allocation" },
      "legend": { "position": "right" }
    }
  }
}
```

Donutdiagramm

Ein Donutdiagramm, das die Aufschlusselung der Cloud-Infrastrukturkosten zeigt.

```chartjs
{
  "type": "doughnut",
  "data": {
    "labels": ["Compute", "Storage", "Database", "Network", "Other"],
    "datasets": [
      {
        "data": [3200, 1800, 2400, 950, 650],
        "backgroundColor": [
          "#ff6384",
          "#36a2eb",
          "#ffce56",
          "#4bc0c0",
          "#c9cbcf"
        ],
        "borderWidth": 2
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Monthly Cloud Costs ($)" },
      "legend": { "position": "bottom" }
    },
    "cutout": "55%"
  }
}
```

Radardiagramm

Ein Radardiagramm zum Vergleich zweier Frontend-Frameworks uber mehrere Kriterien.

```chartjs
{
  "type": "radar",
  "data": {
    "labels": ["Performance", "Ecosystem", "Learning Curve", "Bundle Size", "TypeScript", "Community"],
    "datasets": [
      {
        "label": "Svelte",
        "data": [95, 65, 90, 95, 85, 70],
        "borderColor": "#ff3e00",
        "backgroundColor": "rgba(255, 62, 0, 0.15)"
      },
      {
        "label": "React",
        "data": [75, 98, 60, 55, 80, 98],
        "borderColor": "#61dafb",
        "backgroundColor": "rgba(97, 218, 251, 0.15)"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Framework Comparison" }
    },
    "scales": {
      "r": { "beginAtZero": true, "max": 100 }
    }
  }
}
```

Polarflachendiagramm

Ein Polarflachendiagramm, das die Verteilung der Inhaltstypen eines Blogs zeigt.

```chartjs
{
  "type": "polarArea",
  "data": {
    "labels": ["Tutorials", "Case Studies", "News", "Opinion", "Reviews"],
    "datasets": [
      {
        "data": [35, 22, 18, 14, 11],
        "backgroundColor": [
          "rgba(255, 99, 132, 0.6)",
          "rgba(54, 162, 235, 0.6)",
          "rgba(255, 206, 86, 0.6)",
          "rgba(75, 192, 192, 0.6)",
          "rgba(153, 102, 255, 0.6)"
        ]
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Blog Posts by Category" },
      "legend": { "position": "right" }
    }
  }
}
```

Blasendiagramm

Ein Blasendiagramm, das Produkte nach Preis, Bewertung und Marktanteil vergleicht.

```chartjs
{
  "type": "bubble",
  "data": {
    "datasets": [
      {
        "label": "Product A",
        "data": [{ "x": 29, "y": 4.5, "r": 18 }],
        "backgroundColor": "rgba(255, 99, 132, 0.6)"
      },
      {
        "label": "Product B",
        "data": [{ "x": 49, "y": 4.2, "r": 25 }],
        "backgroundColor": "rgba(54, 162, 235, 0.6)"
      },
      {
        "label": "Product C",
        "data": [{ "x": 79, "y": 4.8, "r": 12 }],
        "backgroundColor": "rgba(255, 206, 86, 0.6)"
      },
      {
        "label": "Product D",
        "data": [{ "x": 39, "y": 3.9, "r": 30 }],
        "backgroundColor": "rgba(75, 192, 192, 0.6)"
      },
      {
        "label": "Product E",
        "data": [{ "x": 99, "y": 4.6, "r": 8 }],
        "backgroundColor": "rgba(153, 102, 255, 0.6)"
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Products: Price vs Rating (bubble = market share)" }
    },
    "scales": {
      "x": { "title": { "display": true, "text": "Price ($)" } },
      "y": { "title": { "display": true, "text": "Rating" }, "min": 3, "max": 5 }
    }
  }
}
```

Mehrfach-Liniendiagramm

Ein Mehrliniendiagramm zum Vergleich der Umsatztrends uber drei Regionen.

```chartjs
{
  "type": "line",
  "data": {
    "labels": ["Q1 '24", "Q2 '24", "Q3 '24", "Q4 '24", "Q1 '25", "Q2 '25"],
    "datasets": [
      {
        "label": "North America",
        "data": [420, 460, 510, 480, 530, 580],
        "borderColor": "#36a2eb",
        "tension": 0.2
      },
      {
        "label": "Europe",
        "data": [310, 340, 355, 370, 395, 420],
        "borderColor": "#ff6384",
        "tension": 0.2
      },
      {
        "label": "Asia Pacific",
        "data": [180, 220, 275, 320, 380, 450],
        "borderColor": "#ffce56",
        "tension": 0.2
      }
    ]
  },
  "options": {
    "plugins": {
      "title": { "display": true, "text": "Regional Revenue ($k)" }
    },
    "scales": {
      "y": { "beginAtZero": false, "title": { "display": true, "text": "$k" } }
    }
  }
}
```