Gradient

import { Gradient } from "@grassroot/charts-react";
 
<Gradient id="catalog-primitive-gradient" colors={["var(--accent)", "var(--vs-success)", "transparent"]} />

<script setup lang="ts">
import { Gradient } from "@grassroot/charts-vue";
</script>
 
<template>
  <Gradient id="catalog-primitive-gradient" :colors='["var(--accent)", "var(--vs-success)", "transparent"]' />
</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: `<grassroot-gradient id="catalog-primitive-gradient" [colors]='["var(--accent)", "var(--vs-success)", "transparent"]' />`,
})
export class GradientDemoComponent {
 
}
 
export default GradientDemoComponent;

<script lang="ts">
  import { Gradient } from "@grassroot/charts-svelte";
</script>
 
<Gradient id="catalog-primitive-gradient" colors={["var(--accent)", "var(--vs-success)", "transparent"]} />

/** @jsxImportSource solid-js */
import { Gradient } from "@grassroot/charts-solid";
 
export default function GradientDemo() {
  return <Gradient id="catalog-primitive-gradient" colors={["var(--accent)", "var(--vs-success)", "transparent"]} />;
}