Glyph

import { Glyph } from "@grassroot/charts-react";
 
<Glyph x={86} y={74} shape="circle" size={14} fill="var(--accent)" />

<script setup lang="ts">
import { Glyph } from "@grassroot/charts-vue";
</script>
 
<template>
  <Glyph :x='86' :y='74' shape="circle" :size='14' fill="var(--accent)" />
</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: `<grassroot-glyph [x]='86' [y]='74' shape="circle" [size]='14' fill="var(--accent)" />`,
})
export class GlyphDemoComponent {
 
}
 
export default GlyphDemoComponent;

<script lang="ts">
  import { Glyph } from "@grassroot/charts-svelte";
</script>
 
<Glyph x={86} y={74} shape="circle" size={14} fill="var(--accent)" />

/** @jsxImportSource solid-js */
import { Glyph } from "@grassroot/charts-solid";
 
export default function GlyphDemo() {
  return <Glyph x={86} y={74} shape="circle" size={14} fill="var(--accent)" />;
}