StatRing

import { StatRing } from "@grassroot/charts-react";
 
export default function StatRingDemo() {
  return (
    <div>
      <StatRing
        animation={{ durationMs: 560 }}
        value={99.97}
        label="Checkout API"
        sub="30-day availability"
        display="99.97%"
        color="var(--vs-success)"
        ariaLabel="Checkout API availability was 99.97 percent over the last 30 days" />
    </div>
  );
}

<script setup lang="ts">
import { StatRing } from "@grassroot/charts-vue";
</script>
 
<template>
  <div>
    <StatRing
      :animation="{ durationMs: 560 }"
      :value="99.97"
      label="Checkout API"
      sub="30-day availability"
      display="99.97%"
      color="var(--vs-success)"
      aria-label="Checkout API availability was 99.97 percent over the last 30 days" />
  </div>
</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.97"
    label="Checkout API"
    sub="30-day availability"
    display="99.97%"
    color="var(--vs-success)"
    ariaLabel="Checkout API availability was 99.97 percent over the last 30 days"
  />`,
})
export class StatRingDemoComponent {
}
 
export default StatRingDemoComponent;

<script lang="ts">
  import { StatRing } from "@grassroot/charts-svelte";
</script>
 
<div>
  <StatRing
    animation={{ durationMs: 560 }}
    value={99.97}
    label="Checkout API"
    sub="30-day availability"
    display="99.97%"
    color="var(--vs-success)"
    ariaLabel="Checkout API availability was 99.97 percent over the last 30 days" />
</div>

/** @jsxImportSource solid-js */
import { StatRing } from "@grassroot/charts-solid";
 
export default function StatRingDemo() {
  return (
    <div>
      <StatRing
        animation={{ durationMs: 560 }}
        value={99.97}
        label="Checkout API"
        sub="30-day availability"
        display="99.97%"
        color="var(--vs-success)"
        ariaLabel="Checkout API availability was 99.97 percent over the last 30 days" />
    </div>
  );
}