RadarChart

import { RadarChart } from "@grassroot/charts-react"; 
const radarSeries = [
  { name: "Target", values: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8], dashed: true, color: "var(--vs-neutral-400)" },
  { name: "Current", values: [0.7, 0.55, 0.8, 0.45, 0.9, 0.6], color: "var(--accent)" },
];
 
<RadarChart animation={{ durationMs: 560, staggerMs: 44 }} axes={["CPU", "Mem", "Net"]} series={radarSeries} />

<script setup lang="ts">
import { RadarChart } from "@grassroot/charts-vue";
 
const radarSeries = [
  { name: "Target", values: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8], dashed: true, color: "var(--vs-neutral-400)" },
  { name: "Current", values: [0.7, 0.55, 0.8, 0.45, 0.9, 0.6], color: "var(--accent)" },
];
</script>
 
<template>
  <RadarChart :animation='{ durationMs: 560, staggerMs: 44 }' :axes='["CPU", "Mem", "Net"]' :series='radarSeries' />
</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,
  template: `<grassroot-radar-chart [animation]='{ durationMs: 560, staggerMs: 44 }' [axes]='["CPU", "Mem", "Net"]' [series]='radarSeries' />`,
})
export class RadarChartDemoComponent {
  readonly radarSeries = [
    { name: "Target", values: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8], dashed: true, color: "var(--vs-neutral-400)" },
    { name: "Current", values: [0.7, 0.55, 0.8, 0.45, 0.9, 0.6], color: "var(--accent)" },
  ];
}
 
export default RadarChartDemoComponent;

<script lang="ts">
  import { RadarChart } from "@grassroot/charts-svelte";
 
  const radarSeries = [
    { name: "Target", values: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8], dashed: true, color: "var(--vs-neutral-400)" },
    { name: "Current", values: [0.7, 0.55, 0.8, 0.45, 0.9, 0.6], color: "var(--accent)" },
  ];
</script>
 
<RadarChart animation={{ durationMs: 560, staggerMs: 44 }} axes={["CPU", "Mem", "Net"]} series={radarSeries} />

/** @jsxImportSource solid-js */
import { RadarChart } from "@grassroot/charts-solid";
 
const radarSeries = [
  { name: "Target", values: [0.8, 0.8, 0.8, 0.8, 0.8, 0.8], dashed: true, color: "var(--vs-neutral-400)" },
  { name: "Current", values: [0.7, 0.55, 0.8, 0.45, 0.9, 0.6], color: "var(--accent)" },
];
 
export default function RadarChartDemo() {
  return <RadarChart animation={{ durationMs: 560, staggerMs: 44 }} axes={["CPU", "Mem", "Net"]} series={radarSeries} />;
}