CandlestickChart

import { CandlestickChart } from "@grassroot/charts-react";
 
const ohlc = [
  { id: "jan-01", date: "2026-01-01", open: 12, high: 18, low: 10, close: 16, volume: 120 },
  { id: "jan-02", date: "2026-01-02", open: 16, high: 20, low: 13, close: 14, volume: 90 },
  { id: "jan-03", date: "2026-01-03", open: 14, high: 22, low: 12, close: 21, volume: 160 },
];
 
 
<CandlestickChart data={ohlc} />

<script setup lang="ts">
import { CandlestickChart } from "@grassroot/charts-vue";
 
const ohlc = [
  { id: "jan-01", date: "2026-01-01", open: 12, high: 18, low: 10, close: 16, volume: 120 },
  { id: "jan-02", date: "2026-01-02", open: 16, high: 20, low: 13, close: 14, volume: 90 },
  { id: "jan-03", date: "2026-01-03", open: 14, high: 22, low: 12, close: 21, volume: 160 },
];
</script>
 
<template>
  <CandlestickChart :data='ohlc' />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootCandlestickChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-candlestick-chart-chart-demo",
  standalone: true,
  imports: [GrassrootCandlestickChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-candlestick-chart [data]='ohlc' />`,
})
export class CandlestickChartDemoComponent {
  readonly ohlc = [
    { id: "jan-01", date: "2026-01-01", open: 12, high: 18, low: 10, close: 16, volume: 120 },
    { id: "jan-02", date: "2026-01-02", open: 16, high: 20, low: 13, close: 14, volume: 90 },
    { id: "jan-03", date: "2026-01-03", open: 14, high: 22, low: 12, close: 21, volume: 160 },
  ];
}
 
export default CandlestickChartDemoComponent;

<script lang="ts">
  import { CandlestickChart } from "@grassroot/charts-svelte";
 
  const ohlc = [
    { id: "jan-01", date: "2026-01-01", open: 12, high: 18, low: 10, close: 16, volume: 120 },
    { id: "jan-02", date: "2026-01-02", open: 16, high: 20, low: 13, close: 14, volume: 90 },
    { id: "jan-03", date: "2026-01-03", open: 14, high: 22, low: 12, close: 21, volume: 160 },
  ];
</script>
 
<CandlestickChart data={ohlc} />

/** @jsxImportSource solid-js */
import { CandlestickChart } from "@grassroot/charts-solid";
 
const ohlc = [
  { id: "jan-01", date: "2026-01-01", open: 12, high: 18, low: 10, close: 16, volume: 120 },
  { id: "jan-02", date: "2026-01-02", open: 16, high: 20, low: 13, close: 14, volume: 90 },
  { id: "jan-03", date: "2026-01-03", open: 14, high: 22, low: 12, close: 21, volume: 160 },
];
 
export default function CandlestickChartDemo() {
  return <CandlestickChart data={ohlc} />;
}