BoxPlotChart

import { BoxPlotChart } from "@grassroot/charts-react";
 
<BoxPlotChart data={[{ label: "API", min: 8, q1: 12, median: 16, q3: 24, max: 34, outliers: [41] }]} />

<script setup lang="ts">
import { BoxPlotChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <BoxPlotChart :data='[{ label: "API", min: 8, q1: 12, median: 16, q3: 24, max: 34, outliers: [41] }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootBoxPlotChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-box-plot-chart-chart-demo",
  standalone: true,
  imports: [GrassrootBoxPlotChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-box-plot-chart [data]='[{ label: "API", min: 8, q1: 12, median: 16, q3: 24, max: 34, outliers: [41] }]' />`,
})
export class BoxPlotChartDemoComponent {
 
}
 
export default BoxPlotChartDemoComponent;

<script lang="ts">
  import { BoxPlotChart } from "@grassroot/charts-svelte";
</script>
 
<BoxPlotChart data={[{ label: "API", min: 8, q1: 12, median: 16, q3: 24, max: 34, outliers: [41] }]} />

/** @jsxImportSource solid-js */
import { BoxPlotChart } from "@grassroot/charts-solid";
 
export default function BoxPlotChartDemo() {
  return <BoxPlotChart data={[{ label: "API", min: 8, q1: 12, median: 16, q3: 24, max: 34, outliers: [41] }]} />;
}