Polygon

import { Polygon } from "@grassroot/charts-react";
 
<Polygon points={[[34, 170], [92, 62], [154, 138], [236, 48], [314, 164]]} fill="var(--accent)" stroke="var(--vs-chart-axis)" />

<script setup lang="ts">
import { Polygon } from "@grassroot/charts-vue";
</script>
 
<template>
  <Polygon :points='[[34, 170], [92, 62], [154, 138], [236, 48], [314, 164]]' fill="var(--accent)" stroke="var(--vs-chart-axis)" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootPolygon } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-polygon-chart-demo",
  standalone: true,
  imports: [GrassrootPolygon],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-polygon [points]='[[34, 170], [92, 62], [154, 138], [236, 48], [314, 164]]' fill="var(--accent)" stroke="var(--vs-chart-axis)" />`,
})
export class PolygonDemoComponent {
 
}
 
export default PolygonDemoComponent;

<script lang="ts">
  import { Polygon } from "@grassroot/charts-svelte";
</script>
 
<Polygon points={[[34, 170], [92, 62], [154, 138], [236, 48], [314, 164]]} fill="var(--accent)" stroke="var(--vs-chart-axis)" />

/** @jsxImportSource solid-js */
import { Polygon } from "@grassroot/charts-solid";
 
export default function PolygonDemo() {
  return <Polygon points={[[34, 170], [92, 62], [154, 138], [236, 48], [314, 164]]} fill="var(--accent)" stroke="var(--vs-chart-axis)" />;
}