Gradient

import { Gradient } from "@grassroot/charts-react";
 
export default function GradientDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 220"
        width="360"
        height="220"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Monthly recurring revenue rising from 1.6 to 2.4 million pounds, January to August 2026"
      >
        <title>Monthly recurring revenue area</title>
        <defs>
          <Gradient
            id="mrr-area-gradient"
            colors={["var(--accent)", "var(--vs-success)", "transparent"]}
          />
        </defs>
        <path
          d="M 28 174 L 52 168 L 76 150 L 100 154 L 124 158 L 148 138 L 172 116 L 196 108 L 220 98 L 244 82 L 268 66 L 296 54 L 332 44 L 332 174 Z"
          fill="url(#mrr-area-gradient)"
          stroke="var(--accent)"
        />
        <text x={28} y={198} fontSize={12} fill="var(--vs-chart-ink)">
          Monthly recurring revenue · £1.6m–£2.4m, Jan–Aug 2026
        </text>
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { Gradient } from "@grassroot/charts-vue";
</script>
 
<template>
  <svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Monthly recurring revenue rising from 1.6 to 2.4 million pounds, January to August 2026"
  >
    <title>Monthly recurring revenue area</title>
    <defs>
      <Gradient
        id="mrr-area-gradient"
        :colors="['var(--accent)', 'var(--vs-success)', 'transparent']"
      />
    </defs>
    <path
      d="M 28 174 L 52 168 L 76 150 L 100 154 L 124 158 L 148 138 L 172 116 L 196 108 L 220 98 L 244 82 L 268 66 L 296 54 L 332 44 L 332 174 Z"
      fill="url(#mrr-area-gradient)"
      stroke="var(--accent)"
    />
    <text x="28" y="198" font-size="12" fill="var(--vs-chart-ink)">
      Monthly recurring revenue · £1.6m–£2.4m, Jan–Aug 2026
    </text>
  </svg>
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootGradient } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-gradient-chart-demo",
  standalone: true,
  imports: [GrassrootGradient],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Monthly recurring revenue rising from 1.6 to 2.4 million pounds, January to August 2026"
  >
    <title>Monthly recurring revenue area</title>
    <defs>
      <linearGradient
        grassroot-gradient
        id="mrr-area-gradient"
        [colors]="['var(--accent)', 'var(--vs-success)', 'transparent']"
      ></linearGradient>
    </defs>
    <path
      d="M 28 174 L 52 168 L 76 150 L 100 154 L 124 158 L 148 138 L 172 116 L 196 108 L 220 98 L 244 82 L 268 66 L 296 54 L 332 44 L 332 174 Z"
      fill="url(#mrr-area-gradient)"
      stroke="var(--accent)"
    />
    <text x="28" y="198" font-size="12" fill="var(--vs-chart-ink)">
      Monthly recurring revenue · £1.6m–£2.4m, Jan–Aug 2026
    </text>
  </svg>`,
})
export class GradientDemoComponent {}
 
export default GradientDemoComponent;

<script lang="ts">
  import { Gradient } from "@grassroot/charts-svelte";
</script>
 
<svg
  viewBox="0 0 360 220"
  width="360"
  height="220"
  style="max-width: 100%"
  role="img"
  aria-label="Monthly recurring revenue rising from 1.6 to 2.4 million pounds, January to August 2026"
>
  <title>Monthly recurring revenue area</title>
  <defs>
    <Gradient
      id="mrr-area-gradient"
      colors={["var(--accent)", "var(--vs-success)", "transparent"]}
    />
  </defs>
  <path
    d="M 28 174 L 52 168 L 76 150 L 100 154 L 124 158 L 148 138 L 172 116 L 196 108 L 220 98 L 244 82 L 268 66 L 296 54 L 332 44 L 332 174 Z"
    fill="url(#mrr-area-gradient)"
    stroke="var(--accent)"
  />
  <text x="28" y="198" font-size="12" fill="var(--vs-chart-ink)"
    >Monthly recurring revenue · £1.6m–£2.4m, Jan–Aug 2026</text
  >
</svg>

/** @jsxImportSource solid-js */
import { Gradient } from "@grassroot/charts-solid";
 
export default function GradientDemo() {
  return (
    <svg
      viewBox="0 0 360 220"
      width="360"
      height="220"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Monthly recurring revenue rising from 1.6 to 2.4 million pounds, January to August 2026"
    >
      <title>Monthly recurring revenue area</title>
      <defs>
        <Gradient
          id="mrr-area-gradient"
          colors={["var(--accent)", "var(--vs-success)", "transparent"]}
        />
      </defs>
      <path
        d="M 28 174 L 52 168 L 76 150 L 100 154 L 124 158 L 148 138 L 172 116 L 196 108 L 220 98 L 244 82 L 268 66 L 296 54 L 332 44 L 332 174 Z"
        fill="url(#mrr-area-gradient)"
        stroke="var(--accent)"
      />
      <text x="28" y="198" font-size="12" fill="var(--vs-chart-ink)">
        Monthly recurring revenue · £1.6m–£2.4m, Jan–Aug 2026
      </text>
    </svg>
  );
}