Polygon

import { Polygon } from "@grassroot/charts-react";
 
export default function PolygonDemo() {
  return (
    <div>
      <svg
        viewBox="0 0 360 220"
        width="360"
        height="220"
        style={{ maxWidth: "100%" }}
        role="img"
        aria-label="Weekday electricity demand profile from 00:00 to 22:00, peaking at 18:00"
      >
        <title>Weekday electricity demand profile</title>
        <Polygon
          points={[
            [28, 176],
            [28, 154],
            [52, 148],
            [74, 136],
            [98, 128],
            [120, 118],
            [144, 104],
            [166, 86],
            [188, 58],
            [212, 44],
            [236, 52],
            [258, 76],
            [282, 98],
            [304, 122],
            [332, 146],
            [332, 176],
          ]}
          fill="var(--accent)"
          fillOpacity={0.24}
          stroke="var(--accent)"
        />
        <text x={220} y={38} fontSize={12} fill="var(--vs-chart-ink)">
          Peak demand · 18:00
        </text>
      </svg>
    </div>
  );
}

<script setup lang="ts">
import { Polygon } from "@grassroot/charts-vue";
</script>
 
<template>
  <svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Weekday electricity demand profile from 00:00 to 22:00, peaking at 18:00"
  >
    <title>Weekday electricity demand profile</title>
    <Polygon
      :points="[
        [28, 176],
        [28, 154],
        [52, 148],
        [74, 136],
        [98, 128],
        [120, 118],
        [144, 104],
        [166, 86],
        [188, 58],
        [212, 44],
        [236, 52],
        [258, 76],
        [282, 98],
        [304, 122],
        [332, 146],
        [332, 176],
      ]"
      fill="var(--accent)"
      :fill-opacity="0.24"
      stroke="var(--accent)"
    />
    <text x="220" y="38" font-size="12" fill="var(--vs-chart-ink)">Peak demand · 18:00</text>
  </svg>
</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: `<svg
    viewBox="0 0 360 220"
    width="360"
    height="220"
    style="max-width: 100%"
    role="img"
    aria-label="Weekday electricity demand profile from 00:00 to 22:00, peaking at 18:00"
  >
    <title>Weekday electricity demand profile</title>
    <polygon
      grassroot-polygon
      [points]="[
        [28, 176],
        [28, 154],
        [52, 148],
        [74, 136],
        [98, 128],
        [120, 118],
        [144, 104],
        [166, 86],
        [188, 58],
        [212, 44],
        [236, 52],
        [258, 76],
        [282, 98],
        [304, 122],
        [332, 146],
        [332, 176],
      ]"
      fill="var(--accent)"
      [fillOpacity]="0.24"
      stroke="var(--accent)"
    ></polygon>
    <text x="220" y="38" font-size="12" fill="var(--vs-chart-ink)">Peak demand · 18:00</text>
  </svg>`,
})
export class PolygonDemoComponent {}
 
export default PolygonDemoComponent;

<script lang="ts">
  import { Polygon } from "@grassroot/charts-svelte";
</script>
 
<svg
  viewBox="0 0 360 220"
  width="360"
  height="220"
  style="max-width: 100%"
  role="img"
  aria-label="Weekday electricity demand profile from 00:00 to 22:00, peaking at 18:00"
>
  <title>Weekday electricity demand profile</title>
  <Polygon
    points={[
      [28, 176],
      [28, 154],
      [52, 148],
      [74, 136],
      [98, 128],
      [120, 118],
      [144, 104],
      [166, 86],
      [188, 58],
      [212, 44],
      [236, 52],
      [258, 76],
      [282, 98],
      [304, 122],
      [332, 146],
      [332, 176],
    ]}
    fill="var(--accent)"
    fillOpacity={0.24}
    stroke="var(--accent)"
  />
  <text x="220" y="38" font-size="12" fill="var(--vs-chart-ink)">Peak demand · 18:00</text>
</svg>

/** @jsxImportSource solid-js */
import { Polygon } from "@grassroot/charts-solid";
 
export default function PolygonDemo() {
  return (
    <svg
      viewBox="0 0 360 220"
      width="360"
      height="220"
      style={{ "max-width": "100%" }}
      role="img"
      aria-label="Weekday electricity demand profile from 00:00 to 22:00, peaking at 18:00"
    >
      <title>Weekday electricity demand profile</title>
      <Polygon
        points={[
          [28, 176],
          [28, 154],
          [52, 148],
          [74, 136],
          [98, 128],
          [120, 118],
          [144, 104],
          [166, 86],
          [188, 58],
          [212, 44],
          [236, 52],
          [258, 76],
          [282, 98],
          [304, 122],
          [332, 146],
          [332, 176],
        ]}
        fill="var(--accent)"
        fillOpacity={0.24}
        stroke="var(--accent)"
      />
      <text x="220" y="38" font-size="12" fill="var(--vs-chart-ink)">
        Peak demand · 18:00
      </text>
    </svg>
  );
}