RadarChart

import { RadarChart } from "@grassroot/charts-react";
 
const radarSeries = [
  {
    name: "Target",
    values: [
      0.9,
      0.85,
      0.9,
      0.85,
      0.8,
      0.75,
      0.88,
      0.7,
    ],
    dashed: true,
    color: "var(--vs-neutral-400)",
  },
  {
    name: "Current",
    values: [
      0.94,
      0.78,
      0.88,
      0.82,
      0.73,
      0.69,
      0.81,
      0.64,
    ],
    color: "var(--accent)",
  },
  {
    name: "Prior quarter",
    values: [
      0.91,
      0.74,
      0.84,
      0.76,
      0.71,
      0.62,
      0.77,
      0.58,
    ],
    color: "var(--vs-info)",
  },
];
 
export default function RadarChartDemo() {
  return (
    <div>
      <RadarChart
        animation={{ durationMs: 560, staggerMs: 44 }}
        axes={[
          "Availability",
          "Latency",
          "Security",
          "Recovery",
          "Cost",
          "Carbon",
          "Compliance",
          "Developer experience",
        ]}
        series={radarSeries}
        ariaLabel="Platform readiness versus target and the prior quarter across eight operational dimensions, Q2 2026" />
    </div>
  );
}

<script setup lang="ts">
import { RadarChart } from "@grassroot/charts-vue";
 
const radarSeries = [
  {
    name: "Target",
    values: [
      0.9,
      0.85,
      0.9,
      0.85,
      0.8,
      0.75,
      0.88,
      0.7,
    ],
    dashed: true,
    color: "var(--vs-neutral-400)",
  },
  {
    name: "Current",
    values: [
      0.94,
      0.78,
      0.88,
      0.82,
      0.73,
      0.69,
      0.81,
      0.64,
    ],
    color: "var(--accent)",
  },
  {
    name: "Prior quarter",
    values: [
      0.91,
      0.74,
      0.84,
      0.76,
      0.71,
      0.62,
      0.77,
      0.58,
    ],
    color: "var(--vs-info)",
  },
];
</script>
 
<template>
  <div>
    <RadarChart
      :animation="{ durationMs: 560, staggerMs: 44 }"
      :axes="[
        'Availability',
        'Latency',
        'Security',
        'Recovery',
        'Cost',
        'Carbon',
        'Compliance',
        'Developer experience',
      ]"
      :series="radarSeries"
      aria-label="Platform readiness versus target and the prior quarter across eight operational dimensions, Q2 2026" />
  </div>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootRadarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-radar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootRadarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  host: { style: "display:block" },
  template: `<div>
    <grassroot-radar-chart
    style="display:contents"
    [animation]="{ durationMs: 560, staggerMs: 44 }"
    [axes]="[
      'Availability',
      'Latency',
      'Security',
      'Recovery',
      'Cost',
      'Carbon',
      'Compliance',
      'Developer experience',
    ]"
    [series]="radarSeries"
    ariaLabel="Platform readiness versus target and the prior quarter across eight operational dimensions, Q2 2026"
  />
  </div>`,
})
export class RadarChartDemoComponent {
  readonly radarSeries = [
    {
      name: "Target",
      values: [
        0.9,
        0.85,
        0.9,
        0.85,
        0.8,
        0.75,
        0.88,
        0.7,
      ],
      dashed: true,
      color: "var(--vs-neutral-400)",
    },
    {
      name: "Current",
      values: [
        0.94,
        0.78,
        0.88,
        0.82,
        0.73,
        0.69,
        0.81,
        0.64,
      ],
      color: "var(--accent)",
    },
    {
      name: "Prior quarter",
      values: [
        0.91,
        0.74,
        0.84,
        0.76,
        0.71,
        0.62,
        0.77,
        0.58,
      ],
      color: "var(--vs-info)",
    },
  ];
}
 
export default RadarChartDemoComponent;

<script lang="ts">
  import { RadarChart } from "@grassroot/charts-svelte";
 
  const radarSeries = [
    {
      name: "Target",
      values: [
        0.9,
        0.85,
        0.9,
        0.85,
        0.8,
        0.75,
        0.88,
        0.7,
      ],
      dashed: true,
      color: "var(--vs-neutral-400)",
    },
    {
      name: "Current",
      values: [
        0.94,
        0.78,
        0.88,
        0.82,
        0.73,
        0.69,
        0.81,
        0.64,
      ],
      color: "var(--accent)",
    },
    {
      name: "Prior quarter",
      values: [
        0.91,
        0.74,
        0.84,
        0.76,
        0.71,
        0.62,
        0.77,
        0.58,
      ],
      color: "var(--vs-info)",
    },
  ];
</script>
 
<div>
  <RadarChart
    animation={{ durationMs: 560, staggerMs: 44 }}
    axes={[
      "Availability",
      "Latency",
      "Security",
      "Recovery",
      "Cost",
      "Carbon",
      "Compliance",
      "Developer experience",
    ]}
    series={radarSeries}
    ariaLabel="Platform readiness versus target and the prior quarter across eight operational dimensions, Q2 2026" />
</div>

/** @jsxImportSource solid-js */
import { RadarChart } from "@grassroot/charts-solid";
 
const radarSeries = [
  {
    name: "Target",
    values: [
      0.9,
      0.85,
      0.9,
      0.85,
      0.8,
      0.75,
      0.88,
      0.7,
    ],
    dashed: true,
    color: "var(--vs-neutral-400)",
  },
  {
    name: "Current",
    values: [
      0.94,
      0.78,
      0.88,
      0.82,
      0.73,
      0.69,
      0.81,
      0.64,
    ],
    color: "var(--accent)",
  },
  {
    name: "Prior quarter",
    values: [
      0.91,
      0.74,
      0.84,
      0.76,
      0.71,
      0.62,
      0.77,
      0.58,
    ],
    color: "var(--vs-info)",
  },
];
 
export default function RadarChartDemo() {
  return (
    <div>
      <RadarChart
        animation={{ durationMs: 560, staggerMs: 44 }}
        axes={[
          "Availability",
          "Latency",
          "Security",
          "Recovery",
          "Cost",
          "Carbon",
          "Compliance",
          "Developer experience",
        ]}
        series={radarSeries}
        ariaLabel="Platform readiness versus target and the prior quarter across eight operational dimensions, Q2 2026" />
    </div>
  );
}