DensityChart

import { DensityChart } from "@grassroot/charts-react";
 
const distribution = [
  {
    label: "api",
    values: [9, 10, 11, 12, 12, 13, 14, 14, 15, 16, 16, 17, 18, 18, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 30, 32, 35, 38],
    color: "var(--accent)",
  },
  {
    label: "worker",
    values: [6, 7, 8, 9, 10, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 26, 28, 31, 34],
    color: "var(--vs-success)",
  },
  {
    label: "edge",
    values: [14, 15, 15, 16, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 29, 31, 33, 36],
    color: "var(--vs-info)",
  },
];
 
 
<DensityChart series={distribution} />

<script setup lang="ts">
import { DensityChart } from "@grassroot/charts-vue";
 
const distribution = [
  {
    label: "api",
    values: [9, 10, 11, 12, 12, 13, 14, 14, 15, 16, 16, 17, 18, 18, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 30, 32, 35, 38],
    color: "var(--accent)",
  },
  {
    label: "worker",
    values: [6, 7, 8, 9, 10, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 26, 28, 31, 34],
    color: "var(--vs-success)",
  },
  {
    label: "edge",
    values: [14, 15, 15, 16, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 29, 31, 33, 36],
    color: "var(--vs-info)",
  },
];
</script>
 
<template>
  <DensityChart :series='distribution' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDensityChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-density-chart-chart-demo",
  standalone: true,
  imports: [GrassrootDensityChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-density-chart [series]='distribution' />`,
})
export class DensityChartDemoComponent {
  readonly distribution = [
    {
      label: "api",
      values: [9, 10, 11, 12, 12, 13, 14, 14, 15, 16, 16, 17, 18, 18, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 30, 32, 35, 38],
      color: "var(--accent)",
    },
    {
      label: "worker",
      values: [6, 7, 8, 9, 10, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 26, 28, 31, 34],
      color: "var(--vs-success)",
    },
    {
      label: "edge",
      values: [14, 15, 15, 16, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 29, 31, 33, 36],
      color: "var(--vs-info)",
    },
  ];
}
 
export default DensityChartDemoComponent;

<script lang="ts">
  import { DensityChart } from "@grassroot/charts-svelte";
 
  const distribution = [
    {
      label: "api",
      values: [9, 10, 11, 12, 12, 13, 14, 14, 15, 16, 16, 17, 18, 18, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 30, 32, 35, 38],
      color: "var(--accent)",
    },
    {
      label: "worker",
      values: [6, 7, 8, 9, 10, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 26, 28, 31, 34],
      color: "var(--vs-success)",
    },
    {
      label: "edge",
      values: [14, 15, 15, 16, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 29, 31, 33, 36],
      color: "var(--vs-info)",
    },
  ];
</script>
 
<DensityChart series={distribution} />

/** @jsxImportSource solid-js */
import { DensityChart } from "@grassroot/charts-solid";
 
const distribution = [
  {
    label: "api",
    values: [9, 10, 11, 12, 12, 13, 14, 14, 15, 16, 16, 17, 18, 18, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 30, 32, 35, 38],
    color: "var(--accent)",
  },
  {
    label: "worker",
    values: [6, 7, 8, 9, 10, 10, 11, 12, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 24, 26, 28, 31, 34],
    color: "var(--vs-success)",
  },
  {
    label: "edge",
    values: [14, 15, 15, 16, 17, 18, 19, 19, 20, 21, 22, 22, 23, 24, 25, 26, 28, 29, 31, 33, 36],
    color: "var(--vs-info)",
  },
];
 
export default function DensityChartDemo() {
  return <DensityChart series={distribution} />;
}