Fusion UI

Playground

BarChart compares values across categories, with axis labels, a legend and tooltips. Series can be stacked.

{
  "series": [
    {
      "name": "Zufrieden",
      "data": [
        30,
        40,
        20,
        50,
        40,
        60,
        70
      ]
    },
    {
      "name": "Neutral",
      "data": [
        20,
        30,
        40,
        20,
        30,
        20,
        10
      ]
    },
    {
      "name": "Unzufrieden",
      "data": [
        10,
        20,
        30,
        20,
        10,
        20,
        15
      ]
    }
  ],
  "axis": [
    "Montag",
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
    "Sonntag"
  ],
  "axisType": "category",
  "colors": "spectrum"
}

{
  "series": [
    {
      "name": "Zufrieden",
      "data": [
        30,
        40,
        20,
        50,
        40,
        60,
        70
      ]
    },
    {
      "name": "Neutral",
      "data": [
        20,
        30,
        40,
        20,
        30,
        20,
        10
      ]
    },
    {
      "name": "Unzufrieden",
      "data": [
        10,
        20,
        30,
        20,
        10,
        20,
        15
      ]
    }
  ],
  "axis": [
    "Montag",
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
    "Sonntag"
  ],
  "axisType": "category",
  "colors": "spectrum"
}

import { BarChart } from "@brynlabs/fusion-ui"

<BarChart
  data={{
  "series": [
    {
      "name": "Zufrieden",
      "data": [
        30,
        40,
        20,
        50,
        40,
        60,
        70
      ]
    },
    {
      "name": "Neutral",
      "data": [
        20,
        30,
        40,
        20,
        30,
        20,
        10
      ]
    },
    {
      "name": "Unzufrieden",
      "data": [
        10,
        20,
        30,
        20,
        10,
        20,
        15
      ]
    }
  ],
  "axis": [
    "Montag",
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
    "Sonntag"
  ],
  "axisType": "category",
  "colors": "spectrum"
}}>
</BarChart>

Bar Chart

Playground