ErrorBarChart

import { ErrorBarChart } from "@grassroot/charts-react";
 
<ErrorBarChart data={[{ x: "API", y: 16, low: 11, high: 22 }, { x: "Web", y: 20, low: 17, high: 28 }]} />

<script setup lang="ts">
import { ErrorBarChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <ErrorBarChart :data='[{ x: "API", y: 16, low: 11, high: 22 }, { x: "Web", y: 20, low: 17, high: 28 }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootErrorBarChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-error-bar-chart-chart-demo",
  standalone: true,
  imports: [GrassrootErrorBarChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-error-bar-chart [data]='[{ x: "API", y: 16, low: 11, high: 22 }, { x: "Web", y: 20, low: 17, high: 28 }]' />`,
})
export class ErrorBarChartDemoComponent {
 
}
 
export default ErrorBarChartDemoComponent;

<script lang="ts">
  import { ErrorBarChart } from "@grassroot/charts-svelte";
</script>
 
<ErrorBarChart data={[{ x: "API", y: 16, low: 11, high: 22 }, { x: "Web", y: 20, low: 17, high: 28 }]} />

/** @jsxImportSource solid-js */
import { ErrorBarChart } from "@grassroot/charts-solid";
 
export default function ErrorBarChartDemo() {
  return <ErrorBarChart data={[{ x: "API", y: 16, low: 11, high: 22 }, { x: "Web", y: 20, low: 17, high: 28 }]} />;
}