LineChart

import * as React from "react"; import { LineChart } from "@grassroot/charts-react"; 
const latencySeries = [
  {
    id: "p50",
    name: "p50",
    color: "var(--vs-neutral-400)",
    points: [62, 58, 71, 66, 60, 74, 69, 55],
  },
  {
    id: "p95",
    name: "p95",
    color: "var(--accent)",
    gradient: true,
    points: [140, 128, 182, 156, 174, 201, 160, 142],
  },
];
 
<LineChart animation={{ durationMs: 700, staggerMs: 64 }} ariaLabel="Latency trend, p50 versus p95" tooltip crosshair legend={{ position: "top" }} series={latencySeries} />

<script setup lang="ts">
import { LineChart } from "@grassroot/charts-vue";
 
const latencySeries = [
  {
    id: "p50",
    name: "p50",
    color: "var(--vs-neutral-400)",
    points: [62, 58, 71, 66, 60, 74, 69, 55],
  },
  {
    id: "p95",
    name: "p95",
    color: "var(--accent)",
    gradient: true,
    points: [140, 128, 182, 156, 174, 201, 160, 142],
  },
];
</script>
 
<template>
  <LineChart :animation='{ durationMs: 700, staggerMs: 64 }' ariaLabel="Latency trend, p50 versus p95" tooltip crosshair :legend='{ position: "top" }' :series='latencySeries' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootLineChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-line-chart-chart-demo",
  standalone: true,
  imports: [GrassrootLineChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-line-chart [animation]='{ durationMs: 700, staggerMs: 64 }' ariaLabel="Latency trend, p50 versus p95" tooltip crosshair [legend]='{ position: "top" }' [series]='latencySeries' />`,
})
export class LineChartDemoComponent {
  readonly latencySeries = [
    {
      id: "p50",
      name: "p50",
      color: "var(--vs-neutral-400)",
      points: [62, 58, 71, 66, 60, 74, 69, 55],
    },
    {
      id: "p95",
      name: "p95",
      color: "var(--accent)",
      gradient: true,
      points: [140, 128, 182, 156, 174, 201, 160, 142],
    },
  ];
}
 
export default LineChartDemoComponent;

<script lang="ts">
  import { LineChart } from "@grassroot/charts-svelte";
 
  const latencySeries = [
    {
      id: "p50",
      name: "p50",
      color: "var(--vs-neutral-400)",
      points: [62, 58, 71, 66, 60, 74, 69, 55],
    },
    {
      id: "p95",
      name: "p95",
      color: "var(--accent)",
      gradient: true,
      points: [140, 128, 182, 156, 174, 201, 160, 142],
    },
  ];
</script>
 
<LineChart animation={{ durationMs: 700, staggerMs: 64 }} ariaLabel="Latency trend, p50 versus p95" tooltip crosshair legend={{ position: "top" }} series={latencySeries} />

/** @jsxImportSource solid-js */
import { LineChart } from "@grassroot/charts-solid";
 
const latencySeries = [
  {
    id: "p50",
    name: "p50",
    color: "var(--vs-neutral-400)",
    points: [62, 58, 71, 66, 60, 74, 69, 55],
  },
  {
    id: "p95",
    name: "p95",
    color: "var(--accent)",
    gradient: true,
    points: [140, 128, 182, 156, 174, 201, 160, 142],
  },
];
 
export default function LineChartDemo() {
  return <LineChart animation={{ durationMs: 700, staggerMs: 64 }} ariaLabel="Latency trend, p50 versus p95" tooltip crosshair legend={{ position: "top" }} series={latencySeries} />;
}