StatRing

import { StatRing } from "@grassroot/charts-react"; <StatRing animation={{ durationMs: 560 }} value={99.95} label="SLA" sub="30-day uptime" display="99.95%" color="var(--vs-success)" />

<script setup lang="ts">
import { StatRing } from "@grassroot/charts-vue";
</script>
 
<template>
  <StatRing :animation='{ durationMs: 560 }' :value='99.95' label="SLA" sub="30-day uptime" display="99.95%" color="var(--vs-success)" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootStatRing } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-stat-ring-chart-demo",
  standalone: true,
  imports: [GrassrootStatRing],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-stat-ring [animation]='{ durationMs: 560 }' [value]='99.95' label="SLA" sub="30-day uptime" display="99.95%" color="var(--vs-success)" />`,
})
export class StatRingDemoComponent {
 
}
 
export default StatRingDemoComponent;

<script lang="ts">
  import { StatRing } from "@grassroot/charts-svelte";
</script>
 
<StatRing animation={{ durationMs: 560 }} value={99.95} label="SLA" sub="30-day uptime" display="99.95%" color="var(--vs-success)" />

/** @jsxImportSource solid-js */
import { StatRing } from "@grassroot/charts-solid";
 
export default function StatRingDemo() {
  return <StatRing animation={{ durationMs: 560 }} value={99.95} label="SLA" sub="30-day uptime" display="99.95%" color="var(--vs-success)" />;
}