Text

import { Text } from "@grassroot/charts-react";
 
<Text x={32} y={34} fontSize={12} fill="var(--vs-chart-ink)">SVG primitives</Text>

<script setup lang="ts">
import { Text } from "@grassroot/charts-vue";
</script>
 
<template>
  <Text :x='32' :y='34' :fontSize='12' fill="var(--vs-chart-ink)" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootText } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-text-chart-demo",
  standalone: true,
  imports: [GrassrootText],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-text [x]='32' [y]='34' [fontSize]='12' fill="var(--vs-chart-ink)" />`,
})
export class TextDemoComponent {
 
}
 
export default TextDemoComponent;

<script lang="ts">
  import { Text } from "@grassroot/charts-svelte";
</script>
 
<Text x={32} y={34} fontSize={12} fill="var(--vs-chart-ink)" />

/** @jsxImportSource solid-js */
import { Text } from "@grassroot/charts-solid";
 
export default function TextDemo() {
  return <Text x={32} y={34} fontSize={12} fill="var(--vs-chart-ink)" />;
}