DepthChart

import { DepthChart } from "@grassroot/charts-react";
 
<DepthChart data={[{ price: 100, bid: 4, ask: 2 }, { price: 102, bid: 8, ask: 5 }, { price: 104, bid: 11, ask: 9 }]} />

<script setup lang="ts">
import { DepthChart } from "@grassroot/charts-vue";
</script>
 
<template>
  <DepthChart :data='[{ price: 100, bid: 4, ask: 2 }, { price: 102, bid: 8, ask: 5 }, { price: 104, bid: 11, ask: 9 }]' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootDepthChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-depth-chart-chart-demo",
  standalone: true,
  imports: [GrassrootDepthChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-depth-chart [data]='[{ price: 100, bid: 4, ask: 2 }, { price: 102, bid: 8, ask: 5 }, { price: 104, bid: 11, ask: 9 }]' />`,
})
export class DepthChartDemoComponent {
 
}
 
export default DepthChartDemoComponent;

<script lang="ts">
  import { DepthChart } from "@grassroot/charts-svelte";
</script>
 
<DepthChart data={[{ price: 100, bid: 4, ask: 2 }, { price: 102, bid: 8, ask: 5 }, { price: 104, bid: 11, ask: 9 }]} />

/** @jsxImportSource solid-js */
import { DepthChart } from "@grassroot/charts-solid";
 
export default function DepthChartDemo() {
  return <DepthChart data={[{ price: 100, bid: 4, ask: 2 }, { price: 102, bid: 8, ask: 5 }, { price: 104, bid: 11, ask: 9 }]} />;
}