Core herunterladen

Treemap mit mehreren Reihen

Zwei Datenreihen als Gruppen angeordnet.

Chart type
Treemap treemap
Tier
Kostenloser Core
Collection
Treemap
Zeichnen
Live im Website-Design
.md ansehen Agenten einrichten
LIVE/treemap/multi-dimensional2 of 7 in Treemap

Diagramm ohne Website-Rahmen öffnen ↗

Configuration

Original Standalone 
const options = {
  chart: {
    height: 380,
    fontFamily: "Inter, Geist, \"IBM Plex Sans\", system-ui, sans-serif",
    type: "treemap",
    toolbar: {
      show: false
    }
  },
  series: [
    {
      name: "Desktop",
      data: [
        {
          x: "Chrome",
          y: 104
        },
        {
          x: "Edge",
          y: 54
        },
        {
          x: "Firefox",
          y: 71
        },
        {
          x: "Safari",
          y: 233
        }
      ]
    },
    {
      name: "Mobile",
      data: [
        {
          x: "Chrome",
          y: 165
        },
        {
          x: "Safari",
          y: 173
        },
        {
          x: "Samsung",
          y: 188
        },
        {
          x: "Other",
          y: 93
        }
      ]
    }
  ],
  legend: {
    show: true
  },
  title: {
    text: "Sessions by browser and platform"
  },
  theme: {
    mode: "light",
    preset: "coastal"
  }
}

const chart = new WestCoastCharts(document.querySelector('#chart'), options)
chart.render()