Glyph

import { Glyph } from "@grassroot/charts-react";
 
export default function GlyphDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 220"
        width="360"
        height="220"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Warehouse status for Manchester, London, Bristol, and Leeds, August 2026"
      >
        <title>Regional warehouse status markers</title>
        <Glyph x={86} y={48} shape="circle" size={16} fill="var(--vs-success)" />
        <text x={108} y={52} fontSize={12} fill="var(--vs-chart-ink)">
          Manchester · on target
        </text>
        <Glyph x={86} y={88} shape="square" size={16} fill="var(--vs-warning)" />
        <text x={108} y={92} fontSize={12} fill="var(--vs-chart-ink)">
          London · watch
        </text>
        <Glyph x={86} y={128} shape="circle" size={16} fill="var(--vs-success)" />
        <text x={108} y={132} fontSize={12} fill="var(--vs-chart-ink)">
          Bristol · on target
        </text>
        <Glyph x={86} y={168} shape="triangle" size={16} fill="var(--vs-error)" />
        <text x={108} y={172} fontSize={12} fill="var(--vs-chart-ink)">
          Leeds · delayed
        </text>
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { Glyph } from "@grassroot/charts-vue";
</script>
 
<template>
  <svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Warehouse status for Manchester, London, Bristol, and Leeds, August 2026"
  >
    <title>Regional warehouse status markers</title>
    <Glyph :x="86" :y="48" shape="circle" :size="16" fill="var(--vs-success)" />
    <text x="108" y="52" font-size="12" fill="var(--vs-chart-ink)">Manchester · on target</text>
    <Glyph :x="86" :y="88" shape="square" :size="16" fill="var(--vs-warning)" />
    <text x="108" y="92" font-size="12" fill="var(--vs-chart-ink)">London · watch</text>
    <Glyph :x="86" :y="128" shape="circle" :size="16" fill="var(--vs-success)" />
    <text x="108" y="132" font-size="12" fill="var(--vs-chart-ink)">Bristol · on target</text>
    <Glyph :x="86" :y="168" shape="triangle" :size="16" fill="var(--vs-error)" />
    <text x="108" y="172" font-size="12" fill="var(--vs-chart-ink)">Leeds · delayed</text>
  </svg>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootGlyph } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-glyph-chart-demo",
  standalone: true,
  imports: [GrassrootGlyph],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Warehouse status for Manchester, London, Bristol, and Leeds, August 2026"
  >
    <title>Regional warehouse status markers</title>
    <g grassroot-glyph [x]="86" [y]="48" shape="circle" [size]="16" fill="var(--vs-success)"></g>
    <text x="108" y="52" font-size="12" fill="var(--vs-chart-ink)">Manchester · on target</text>
    <g grassroot-glyph [x]="86" [y]="88" shape="square" [size]="16" fill="var(--vs-warning)"></g>
    <text x="108" y="92" font-size="12" fill="var(--vs-chart-ink)">London · watch</text>
    <g grassroot-glyph [x]="86" [y]="128" shape="circle" [size]="16" fill="var(--vs-success)"></g>
    <text x="108" y="132" font-size="12" fill="var(--vs-chart-ink)">Bristol · on target</text>
    <g grassroot-glyph [x]="86" [y]="168" shape="triangle" [size]="16" fill="var(--vs-error)"></g>
    <text x="108" y="172" font-size="12" fill="var(--vs-chart-ink)">Leeds · delayed</text>
  </svg>`,
})
export class GlyphDemoComponent {}
 
export default GlyphDemoComponent;

<script lang="ts">
  import { Glyph } from "@grassroot/charts-svelte";
</script>
 
<svg
  viewBox="0 0 360 220"
  width="360"
  height="220"
  style="max-width: 100%"
  role="img"
  aria-label="Warehouse status for Manchester, London, Bristol, and Leeds, August 2026"
>
  <title>Regional warehouse status markers</title>
  <Glyph x={86} y={48} shape="circle" size={16} fill="var(--vs-success)" />
  <text x="108" y="52" font-size="12" fill="var(--vs-chart-ink)">Manchester · on target</text>
  <Glyph x={86} y={88} shape="square" size={16} fill="var(--vs-warning)" />
  <text x="108" y="92" font-size="12" fill="var(--vs-chart-ink)">London · watch</text>
  <Glyph x={86} y={128} shape="circle" size={16} fill="var(--vs-success)" />
  <text x="108" y="132" font-size="12" fill="var(--vs-chart-ink)">Bristol · on target</text>
  <Glyph x={86} y={168} shape="triangle" size={16} fill="var(--vs-error)" />
  <text x="108" y="172" font-size="12" fill="var(--vs-chart-ink)">Leeds · delayed</text>
</svg>

/** @jsxImportSource solid-js */
import { Glyph } from "@grassroot/charts-solid";
 
export default function GlyphDemo() {
  return (
    <svg
      viewBox="0 0 360 220"
      width="360"
      height="220"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Warehouse status for Manchester, London, Bristol, and Leeds, August 2026"
    >
      <title>Regional warehouse status markers</title>
      <Glyph x={86} y={48} shape="circle" size={16} fill="var(--vs-success)" />
      <text x="108" y="52" font-size="12" fill="var(--vs-chart-ink)">
        Manchester · on target
      </text>
      <Glyph x={86} y={88} shape="square" size={16} fill="var(--vs-warning)" />
      <text x="108" y="92" font-size="12" fill="var(--vs-chart-ink)">
        London · watch
      </text>
      <Glyph x={86} y={128} shape="circle" size={16} fill="var(--vs-success)" />
      <text x="108" y="132" font-size="12" fill="var(--vs-chart-ink)">
        Bristol · on target
      </text>
      <Glyph x={86} y={168} shape="triangle" size={16} fill="var(--vs-error)" />
      <text x="108" y="172" font-size="12" fill="var(--vs-chart-ink)">
        Leeds · delayed
      </text>
    </svg>
  );
}