Text

import { Text } from "@grassroot/charts-react";
 
export default function TextDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 160"
        width="360"
        height="160"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Chart annotations for Q1 to Q3 revenue, 2026"
      >
        <title>Chart annotation example</title>
        <line x1={32} y1={96} x2={328} y2={96} stroke="var(--vs-chart-axis)" />
        <Text x={32} y={76}>Q1 revenue · £1.9m</Text>
        <Text x={148} y={58}>Q2 revenue · £2.4m</Text>
        <Text x={248} y={44}>Q3 forecast · £2.7m</Text>
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { Text } from "@grassroot/charts-vue";
</script>
 
<template>
  <svg
    viewBox="0 0 360 160"
    width="360"
    height="160"
    style="max-width: 100%"
    role="img"
    aria-label="Chart annotations for Q1 to Q3 revenue, 2026"
  >
    <title>Chart annotation example</title>
    <line x1="32" y1="96" x2="328" y2="96" stroke="var(--vs-chart-axis)" />
    <Text :x="32" :y="76">Q1 revenue · £1.9m</Text>
    <Text :x="148" :y="58">Q2 revenue · £2.4m</Text>
    <Text :x="248" :y="44">Q3 forecast · £2.7m</Text>
  </svg>
</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: `<svg
    viewBox="0 0 360 160"
    width="360"
    height="160"
    style="max-width: 100%"
    role="img"
    aria-label="Chart annotations for Q1 to Q3 revenue, 2026"
  >
    <title>Chart annotation example</title>
    <line x1="32" y1="96" x2="328" y2="96" stroke="var(--vs-chart-axis)" />
    <text grassroot-text [x]="32" [y]="76">Q1 revenue · £1.9m</text>
    <text grassroot-text [x]="148" [y]="58">Q2 revenue · £2.4m</text>
    <text grassroot-text [x]="248" [y]="44">Q3 forecast · £2.7m</text>
  </svg>`,
})
export class TextDemoComponent {}
 
export default TextDemoComponent;

<script lang="ts">
  import { Text } from "@grassroot/charts-svelte";
</script>
 
<svg
  viewBox="0 0 360 160"
  width="360"
  height="160"
  style="max-width: 100%"
  role="img"
  aria-label="Chart annotations for Q1 to Q3 revenue, 2026"
>
  <title>Chart annotation example</title>
  <line x1="32" y1="96" x2="328" y2="96" stroke="var(--vs-chart-axis)" />
  <Text x={32} y={76}>Q1 revenue · £1.9m</Text>
  <Text x={148} y={58}>Q2 revenue · £2.4m</Text>
  <Text x={248} y={44}>Q3 forecast · £2.7m</Text>
</svg>

/** @jsxImportSource solid-js */
import { Text } from "@grassroot/charts-solid";
 
export default function TextDemo() {
  return (
    <svg
      viewBox="0 0 360 160"
      width="360"
      height="160"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Chart annotations for Q1 to Q3 revenue, 2026"
    >
      <title>Chart annotation example</title>
      <line x1="32" y1="96" x2="328" y2="96" stroke="var(--vs-chart-axis)" />
      <Text x={32} y={76}>Q1 revenue · £1.9m</Text>
      <Text x={148} y={58}>Q2 revenue · £2.4m</Text>
      <Text x={248} y={44}>Q3 forecast · £2.7m</Text>
    </svg>
  );
}