Docs Charts Financial

OHLCChart

import { OHLCChart } from "@grassroot/charts-react";
 
const ohlc = [
  {
    id: "jun-01",
    date: "2026-06-01",
    open: 176.4,
    high: 179.9,
    low: 176,
    close: 178.7,
    volume: 1510000,
  },
  {
    id: "jun-02",
    date: "2026-06-02",
    open: 178.7,
    high: 181.3,
    low: 177.1,
    close: 178.5,
    volume: 1900000,
  },
  {
    id: "jun-03",
    date: "2026-06-03",
    open: 178.5,
    high: 182.7,
    low: 176.4,
    close: 180.2,
    volume: 1050000,
  },
  {
    id: "jun-04",
    date: "2026-06-04",
    open: 180.2,
    high: 182,
    low: 179.5,
    close: 180.9,
    volume: 1380000,
  },
  {
    id: "jun-05",
    date: "2026-06-05",
    open: 180.9,
    high: 183.1,
    low: 180.1,
    close: 181.8,
    volume: 1820000,
  },
  {
    id: "jun-08",
    date: "2026-06-08",
    open: 181.8,
    high: 182.8,
    low: 179.4,
    close: 180.7,
    volume: 1590000,
  },
  {
    id: "jun-09",
    date: "2026-06-09",
    open: 180.7,
    high: 185.5,
    low: 179.7,
    close: 183.1,
    volume: 1550000,
  },
  {
    id: "jun-10",
    date: "2026-06-10",
    open: 183.1,
    high: 183.8,
    low: 181.8,
    close: 183.3,
    volume: 1690000,
  },
  {
    id: "jun-11",
    date: "2026-06-11",
    open: 183.3,
    high: 186.5,
    low: 182.1,
    close: 185.7,
    volume: 1570000,
  },
  {
    id: "jun-12",
    date: "2026-06-12",
    open: 185.7,
    high: 187.6,
    low: 184.1,
    close: 184.9,
    volume: 1640000,
  },
  {
    id: "jun-15",
    date: "2026-06-15",
    open: 184.9,
    high: 186.4,
    low: 184.2,
    close: 184.6,
    volume: 1280000,
  },
  {
    id: "jun-16",
    date: "2026-06-16",
    open: 184.6,
    high: 185.3,
    low: 182,
    close: 183.5,
    volume: 1980000,
  },
  {
    id: "jun-17",
    date: "2026-06-17",
    open: 183.5,
    high: 184.9,
    low: 183.1,
    close: 183.8,
    volume: 1680000,
  },
  {
    id: "jun-18",
    date: "2026-06-18",
    open: 183.8,
    high: 186.8,
    low: 182.6,
    close: 185.9,
    volume: 2020000,
  },
  {
    id: "jun-19",
    date: "2026-06-19",
    open: 185.9,
    high: 189.5,
    low: 184.1,
    close: 187.5,
    volume: 1580000,
  },
  {
    id: "jun-22",
    date: "2026-06-22",
    open: 187.5,
    high: 189,
    low: 185,
    close: 186.5,
    volume: 1130000,
  },
  {
    id: "jun-23",
    date: "2026-06-23",
    open: 186.5,
    high: 189.4,
    low: 185.6,
    close: 187.1,
    volume: 1260000,
  },
  {
    id: "jun-24",
    date: "2026-06-24",
    open: 187.1,
    high: 187.7,
    low: 184.8,
    close: 186.3,
    volume: 940000,
  },
  {
    id: "jun-25",
    date: "2026-06-25",
    open: 186.3,
    high: 188.4,
    low: 185.4,
    close: 186.4,
    volume: 1230000,
  },
  {
    id: "jun-26",
    date: "2026-06-26",
    open: 186.4,
    high: 189,
    low: 184.9,
    close: 185.3,
    volume: 1610000,
  },
  {
    id: "jun-29",
    date: "2026-06-29",
    open: 185.3,
    high: 187.7,
    low: 182.7,
    close: 185,
    volume: 1080000,
  },
  {
    id: "jun-30",
    date: "2026-06-30",
    open: 185,
    high: 187.5,
    low: 183,
    close: 184.8,
    volume: 1360000,
  },
  {
    id: "jul-01",
    date: "2026-07-01",
    open: 184.8,
    high: 188.1,
    low: 184.3,
    close: 186.1,
    volume: 1700000,
  },
  {
    id: "jul-02",
    date: "2026-07-02",
    open: 186.1,
    high: 188.9,
    low: 184.5,
    close: 187.6,
    volume: 1640000,
  },
  {
    id: "jul-03",
    date: "2026-07-03",
    open: 187.6,
    high: 189,
    low: 185.4,
    close: 187.3,
    volume: 1350000,
  },
  {
    id: "jul-06",
    date: "2026-07-06",
    open: 187.3,
    high: 188.7,
    low: 186.2,
    close: 187.2,
    volume: 950000,
  },
  {
    id: "jul-07",
    date: "2026-07-07",
    open: 187.2,
    high: 190.1,
    low: 186.7,
    close: 188.5,
    volume: 1490000,
  },
  {
    id: "jul-08",
    date: "2026-07-08",
    open: 188.5,
    high: 191,
    low: 187.7,
    close: 188.9,
    volume: 1330000,
  },
  {
    id: "jul-09",
    date: "2026-07-09",
    open: 188.9,
    high: 191.4,
    low: 186.3,
    close: 188.4,
    volume: 1480000,
  },
  {
    id: "jul-10",
    date: "2026-07-10",
    open: 188.4,
    high: 191.2,
    low: 186.9,
    close: 189.6,
    volume: 1210000,
  },
  {
    id: "jul-13",
    date: "2026-07-13",
    open: 189.6,
    high: 190.8,
    low: 188.6,
    close: 189.1,
    volume: 1000000,
  },
  {
    id: "jul-14",
    date: "2026-07-14",
    open: 189.1,
    high: 192.2,
    low: 187.6,
    close: 191.7,
    volume: 1620000,
  },
  {
    id: "jul-15",
    date: "2026-07-15",
    open: 191.7,
    high: 195.4,
    low: 190.8,
    close: 194.3,
    volume: 1260000,
  },
  {
    id: "jul-16",
    date: "2026-07-16",
    open: 194.3,
    high: 199,
    low: 193.5,
    close: 196.8,
    volume: 1070000,
  },
  {
    id: "jul-17",
    date: "2026-07-17",
    open: 196.8,
    high: 201.3,
    low: 195.8,
    close: 199.6,
    volume: 1430000,
  },
];
 
export default function OHLCChartDemo() {
  return (
    <div>
      <OHLCChart ariaLabel="Atlas Energy share price, 1 June to 17 July 2026" data={ohlc} />
    </div>
  );
}

<script setup lang="ts">
import { OHLCChart } from "@grassroot/charts-vue";
 
const ohlc = [
  {
    id: "jun-01",
    date: "2026-06-01",
    open: 176.4,
    high: 179.9,
    low: 176,
    close: 178.7,
    volume: 1510000,
  },
  {
    id: "jun-02",
    date: "2026-06-02",
    open: 178.7,
    high: 181.3,
    low: 177.1,
    close: 178.5,
    volume: 1900000,
  },
  {
    id: "jun-03",
    date: "2026-06-03",
    open: 178.5,
    high: 182.7,
    low: 176.4,
    close: 180.2,
    volume: 1050000,
  },
  {
    id: "jun-04",
    date: "2026-06-04",
    open: 180.2,
    high: 182,
    low: 179.5,
    close: 180.9,
    volume: 1380000,
  },
  {
    id: "jun-05",
    date: "2026-06-05",
    open: 180.9,
    high: 183.1,
    low: 180.1,
    close: 181.8,
    volume: 1820000,
  },
  {
    id: "jun-08",
    date: "2026-06-08",
    open: 181.8,
    high: 182.8,
    low: 179.4,
    close: 180.7,
    volume: 1590000,
  },
  {
    id: "jun-09",
    date: "2026-06-09",
    open: 180.7,
    high: 185.5,
    low: 179.7,
    close: 183.1,
    volume: 1550000,
  },
  {
    id: "jun-10",
    date: "2026-06-10",
    open: 183.1,
    high: 183.8,
    low: 181.8,
    close: 183.3,
    volume: 1690000,
  },
  {
    id: "jun-11",
    date: "2026-06-11",
    open: 183.3,
    high: 186.5,
    low: 182.1,
    close: 185.7,
    volume: 1570000,
  },
  {
    id: "jun-12",
    date: "2026-06-12",
    open: 185.7,
    high: 187.6,
    low: 184.1,
    close: 184.9,
    volume: 1640000,
  },
  {
    id: "jun-15",
    date: "2026-06-15",
    open: 184.9,
    high: 186.4,
    low: 184.2,
    close: 184.6,
    volume: 1280000,
  },
  {
    id: "jun-16",
    date: "2026-06-16",
    open: 184.6,
    high: 185.3,
    low: 182,
    close: 183.5,
    volume: 1980000,
  },
  {
    id: "jun-17",
    date: "2026-06-17",
    open: 183.5,
    high: 184.9,
    low: 183.1,
    close: 183.8,
    volume: 1680000,
  },
  {
    id: "jun-18",
    date: "2026-06-18",
    open: 183.8,
    high: 186.8,
    low: 182.6,
    close: 185.9,
    volume: 2020000,
  },
  {
    id: "jun-19",
    date: "2026-06-19",
    open: 185.9,
    high: 189.5,
    low: 184.1,
    close: 187.5,
    volume: 1580000,
  },
  {
    id: "jun-22",
    date: "2026-06-22",
    open: 187.5,
    high: 189,
    low: 185,
    close: 186.5,
    volume: 1130000,
  },
  {
    id: "jun-23",
    date: "2026-06-23",
    open: 186.5,
    high: 189.4,
    low: 185.6,
    close: 187.1,
    volume: 1260000,
  },
  {
    id: "jun-24",
    date: "2026-06-24",
    open: 187.1,
    high: 187.7,
    low: 184.8,
    close: 186.3,
    volume: 940000,
  },
  {
    id: "jun-25",
    date: "2026-06-25",
    open: 186.3,
    high: 188.4,
    low: 185.4,
    close: 186.4,
    volume: 1230000,
  },
  {
    id: "jun-26",
    date: "2026-06-26",
    open: 186.4,
    high: 189,
    low: 184.9,
    close: 185.3,
    volume: 1610000,
  },
  {
    id: "jun-29",
    date: "2026-06-29",
    open: 185.3,
    high: 187.7,
    low: 182.7,
    close: 185,
    volume: 1080000,
  },
  {
    id: "jun-30",
    date: "2026-06-30",
    open: 185,
    high: 187.5,
    low: 183,
    close: 184.8,
    volume: 1360000,
  },
  {
    id: "jul-01",
    date: "2026-07-01",
    open: 184.8,
    high: 188.1,
    low: 184.3,
    close: 186.1,
    volume: 1700000,
  },
  {
    id: "jul-02",
    date: "2026-07-02",
    open: 186.1,
    high: 188.9,
    low: 184.5,
    close: 187.6,
    volume: 1640000,
  },
  {
    id: "jul-03",
    date: "2026-07-03",
    open: 187.6,
    high: 189,
    low: 185.4,
    close: 187.3,
    volume: 1350000,
  },
  {
    id: "jul-06",
    date: "2026-07-06",
    open: 187.3,
    high: 188.7,
    low: 186.2,
    close: 187.2,
    volume: 950000,
  },
  {
    id: "jul-07",
    date: "2026-07-07",
    open: 187.2,
    high: 190.1,
    low: 186.7,
    close: 188.5,
    volume: 1490000,
  },
  {
    id: "jul-08",
    date: "2026-07-08",
    open: 188.5,
    high: 191,
    low: 187.7,
    close: 188.9,
    volume: 1330000,
  },
  {
    id: "jul-09",
    date: "2026-07-09",
    open: 188.9,
    high: 191.4,
    low: 186.3,
    close: 188.4,
    volume: 1480000,
  },
  {
    id: "jul-10",
    date: "2026-07-10",
    open: 188.4,
    high: 191.2,
    low: 186.9,
    close: 189.6,
    volume: 1210000,
  },
  {
    id: "jul-13",
    date: "2026-07-13",
    open: 189.6,
    high: 190.8,
    low: 188.6,
    close: 189.1,
    volume: 1000000,
  },
  {
    id: "jul-14",
    date: "2026-07-14",
    open: 189.1,
    high: 192.2,
    low: 187.6,
    close: 191.7,
    volume: 1620000,
  },
  {
    id: "jul-15",
    date: "2026-07-15",
    open: 191.7,
    high: 195.4,
    low: 190.8,
    close: 194.3,
    volume: 1260000,
  },
  {
    id: "jul-16",
    date: "2026-07-16",
    open: 194.3,
    high: 199,
    low: 193.5,
    close: 196.8,
    volume: 1070000,
  },
  {
    id: "jul-17",
    date: "2026-07-17",
    open: 196.8,
    high: 201.3,
    low: 195.8,
    close: 199.6,
    volume: 1430000,
  },
];
</script>
 
<template>
  <OHLCChart aria-label="Atlas Energy share price, 1 June to 17 July 2026" :data="ohlc" />
</template>

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootOHLCChart } from "@grassroot/charts-angular";
 
@Component({
  selector: "app-ohlcchart-chart-demo",
  standalone: true,
  imports: [GrassrootOHLCChart],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `<grassroot-ohlc-chart
    [ariaLabel]="'Atlas Energy share price, 1 June to 17 July 2026'"
    [data]="ohlc"
  />`,
})
export class OHLCChartDemoComponent {
  readonly ohlc = [
    {
      id: "jun-01",
      date: "2026-06-01",
      open: 176.4,
      high: 179.9,
      low: 176,
      close: 178.7,
      volume: 1510000,
    },
    {
      id: "jun-02",
      date: "2026-06-02",
      open: 178.7,
      high: 181.3,
      low: 177.1,
      close: 178.5,
      volume: 1900000,
    },
    {
      id: "jun-03",
      date: "2026-06-03",
      open: 178.5,
      high: 182.7,
      low: 176.4,
      close: 180.2,
      volume: 1050000,
    },
    {
      id: "jun-04",
      date: "2026-06-04",
      open: 180.2,
      high: 182,
      low: 179.5,
      close: 180.9,
      volume: 1380000,
    },
    {
      id: "jun-05",
      date: "2026-06-05",
      open: 180.9,
      high: 183.1,
      low: 180.1,
      close: 181.8,
      volume: 1820000,
    },
    {
      id: "jun-08",
      date: "2026-06-08",
      open: 181.8,
      high: 182.8,
      low: 179.4,
      close: 180.7,
      volume: 1590000,
    },
    {
      id: "jun-09",
      date: "2026-06-09",
      open: 180.7,
      high: 185.5,
      low: 179.7,
      close: 183.1,
      volume: 1550000,
    },
    {
      id: "jun-10",
      date: "2026-06-10",
      open: 183.1,
      high: 183.8,
      low: 181.8,
      close: 183.3,
      volume: 1690000,
    },
    {
      id: "jun-11",
      date: "2026-06-11",
      open: 183.3,
      high: 186.5,
      low: 182.1,
      close: 185.7,
      volume: 1570000,
    },
    {
      id: "jun-12",
      date: "2026-06-12",
      open: 185.7,
      high: 187.6,
      low: 184.1,
      close: 184.9,
      volume: 1640000,
    },
    {
      id: "jun-15",
      date: "2026-06-15",
      open: 184.9,
      high: 186.4,
      low: 184.2,
      close: 184.6,
      volume: 1280000,
    },
    {
      id: "jun-16",
      date: "2026-06-16",
      open: 184.6,
      high: 185.3,
      low: 182,
      close: 183.5,
      volume: 1980000,
    },
    {
      id: "jun-17",
      date: "2026-06-17",
      open: 183.5,
      high: 184.9,
      low: 183.1,
      close: 183.8,
      volume: 1680000,
    },
    {
      id: "jun-18",
      date: "2026-06-18",
      open: 183.8,
      high: 186.8,
      low: 182.6,
      close: 185.9,
      volume: 2020000,
    },
    {
      id: "jun-19",
      date: "2026-06-19",
      open: 185.9,
      high: 189.5,
      low: 184.1,
      close: 187.5,
      volume: 1580000,
    },
    {
      id: "jun-22",
      date: "2026-06-22",
      open: 187.5,
      high: 189,
      low: 185,
      close: 186.5,
      volume: 1130000,
    },
    {
      id: "jun-23",
      date: "2026-06-23",
      open: 186.5,
      high: 189.4,
      low: 185.6,
      close: 187.1,
      volume: 1260000,
    },
    {
      id: "jun-24",
      date: "2026-06-24",
      open: 187.1,
      high: 187.7,
      low: 184.8,
      close: 186.3,
      volume: 940000,
    },
    {
      id: "jun-25",
      date: "2026-06-25",
      open: 186.3,
      high: 188.4,
      low: 185.4,
      close: 186.4,
      volume: 1230000,
    },
    {
      id: "jun-26",
      date: "2026-06-26",
      open: 186.4,
      high: 189,
      low: 184.9,
      close: 185.3,
      volume: 1610000,
    },
    {
      id: "jun-29",
      date: "2026-06-29",
      open: 185.3,
      high: 187.7,
      low: 182.7,
      close: 185,
      volume: 1080000,
    },
    {
      id: "jun-30",
      date: "2026-06-30",
      open: 185,
      high: 187.5,
      low: 183,
      close: 184.8,
      volume: 1360000,
    },
    {
      id: "jul-01",
      date: "2026-07-01",
      open: 184.8,
      high: 188.1,
      low: 184.3,
      close: 186.1,
      volume: 1700000,
    },
    {
      id: "jul-02",
      date: "2026-07-02",
      open: 186.1,
      high: 188.9,
      low: 184.5,
      close: 187.6,
      volume: 1640000,
    },
    {
      id: "jul-03",
      date: "2026-07-03",
      open: 187.6,
      high: 189,
      low: 185.4,
      close: 187.3,
      volume: 1350000,
    },
    {
      id: "jul-06",
      date: "2026-07-06",
      open: 187.3,
      high: 188.7,
      low: 186.2,
      close: 187.2,
      volume: 950000,
    },
    {
      id: "jul-07",
      date: "2026-07-07",
      open: 187.2,
      high: 190.1,
      low: 186.7,
      close: 188.5,
      volume: 1490000,
    },
    {
      id: "jul-08",
      date: "2026-07-08",
      open: 188.5,
      high: 191,
      low: 187.7,
      close: 188.9,
      volume: 1330000,
    },
    {
      id: "jul-09",
      date: "2026-07-09",
      open: 188.9,
      high: 191.4,
      low: 186.3,
      close: 188.4,
      volume: 1480000,
    },
    {
      id: "jul-10",
      date: "2026-07-10",
      open: 188.4,
      high: 191.2,
      low: 186.9,
      close: 189.6,
      volume: 1210000,
    },
    {
      id: "jul-13",
      date: "2026-07-13",
      open: 189.6,
      high: 190.8,
      low: 188.6,
      close: 189.1,
      volume: 1000000,
    },
    {
      id: "jul-14",
      date: "2026-07-14",
      open: 189.1,
      high: 192.2,
      low: 187.6,
      close: 191.7,
      volume: 1620000,
    },
    {
      id: "jul-15",
      date: "2026-07-15",
      open: 191.7,
      high: 195.4,
      low: 190.8,
      close: 194.3,
      volume: 1260000,
    },
    {
      id: "jul-16",
      date: "2026-07-16",
      open: 194.3,
      high: 199,
      low: 193.5,
      close: 196.8,
      volume: 1070000,
    },
    {
      id: "jul-17",
      date: "2026-07-17",
      open: 196.8,
      high: 201.3,
      low: 195.8,
      close: 199.6,
      volume: 1430000,
    },
  ];
}
 
export default OHLCChartDemoComponent;

<script lang="ts">
  import { OHLCChart } from "@grassroot/charts-svelte";
 
  const ohlc = [
    {
      id: "jun-01",
      date: "2026-06-01",
      open: 176.4,
      high: 179.9,
      low: 176,
      close: 178.7,
      volume: 1510000,
    },
    {
      id: "jun-02",
      date: "2026-06-02",
      open: 178.7,
      high: 181.3,
      low: 177.1,
      close: 178.5,
      volume: 1900000,
    },
    {
      id: "jun-03",
      date: "2026-06-03",
      open: 178.5,
      high: 182.7,
      low: 176.4,
      close: 180.2,
      volume: 1050000,
    },
    {
      id: "jun-04",
      date: "2026-06-04",
      open: 180.2,
      high: 182,
      low: 179.5,
      close: 180.9,
      volume: 1380000,
    },
    {
      id: "jun-05",
      date: "2026-06-05",
      open: 180.9,
      high: 183.1,
      low: 180.1,
      close: 181.8,
      volume: 1820000,
    },
    {
      id: "jun-08",
      date: "2026-06-08",
      open: 181.8,
      high: 182.8,
      low: 179.4,
      close: 180.7,
      volume: 1590000,
    },
    {
      id: "jun-09",
      date: "2026-06-09",
      open: 180.7,
      high: 185.5,
      low: 179.7,
      close: 183.1,
      volume: 1550000,
    },
    {
      id: "jun-10",
      date: "2026-06-10",
      open: 183.1,
      high: 183.8,
      low: 181.8,
      close: 183.3,
      volume: 1690000,
    },
    {
      id: "jun-11",
      date: "2026-06-11",
      open: 183.3,
      high: 186.5,
      low: 182.1,
      close: 185.7,
      volume: 1570000,
    },
    {
      id: "jun-12",
      date: "2026-06-12",
      open: 185.7,
      high: 187.6,
      low: 184.1,
      close: 184.9,
      volume: 1640000,
    },
    {
      id: "jun-15",
      date: "2026-06-15",
      open: 184.9,
      high: 186.4,
      low: 184.2,
      close: 184.6,
      volume: 1280000,
    },
    {
      id: "jun-16",
      date: "2026-06-16",
      open: 184.6,
      high: 185.3,
      low: 182,
      close: 183.5,
      volume: 1980000,
    },
    {
      id: "jun-17",
      date: "2026-06-17",
      open: 183.5,
      high: 184.9,
      low: 183.1,
      close: 183.8,
      volume: 1680000,
    },
    {
      id: "jun-18",
      date: "2026-06-18",
      open: 183.8,
      high: 186.8,
      low: 182.6,
      close: 185.9,
      volume: 2020000,
    },
    {
      id: "jun-19",
      date: "2026-06-19",
      open: 185.9,
      high: 189.5,
      low: 184.1,
      close: 187.5,
      volume: 1580000,
    },
    {
      id: "jun-22",
      date: "2026-06-22",
      open: 187.5,
      high: 189,
      low: 185,
      close: 186.5,
      volume: 1130000,
    },
    {
      id: "jun-23",
      date: "2026-06-23",
      open: 186.5,
      high: 189.4,
      low: 185.6,
      close: 187.1,
      volume: 1260000,
    },
    {
      id: "jun-24",
      date: "2026-06-24",
      open: 187.1,
      high: 187.7,
      low: 184.8,
      close: 186.3,
      volume: 940000,
    },
    {
      id: "jun-25",
      date: "2026-06-25",
      open: 186.3,
      high: 188.4,
      low: 185.4,
      close: 186.4,
      volume: 1230000,
    },
    {
      id: "jun-26",
      date: "2026-06-26",
      open: 186.4,
      high: 189,
      low: 184.9,
      close: 185.3,
      volume: 1610000,
    },
    {
      id: "jun-29",
      date: "2026-06-29",
      open: 185.3,
      high: 187.7,
      low: 182.7,
      close: 185,
      volume: 1080000,
    },
    {
      id: "jun-30",
      date: "2026-06-30",
      open: 185,
      high: 187.5,
      low: 183,
      close: 184.8,
      volume: 1360000,
    },
    {
      id: "jul-01",
      date: "2026-07-01",
      open: 184.8,
      high: 188.1,
      low: 184.3,
      close: 186.1,
      volume: 1700000,
    },
    {
      id: "jul-02",
      date: "2026-07-02",
      open: 186.1,
      high: 188.9,
      low: 184.5,
      close: 187.6,
      volume: 1640000,
    },
    {
      id: "jul-03",
      date: "2026-07-03",
      open: 187.6,
      high: 189,
      low: 185.4,
      close: 187.3,
      volume: 1350000,
    },
    {
      id: "jul-06",
      date: "2026-07-06",
      open: 187.3,
      high: 188.7,
      low: 186.2,
      close: 187.2,
      volume: 950000,
    },
    {
      id: "jul-07",
      date: "2026-07-07",
      open: 187.2,
      high: 190.1,
      low: 186.7,
      close: 188.5,
      volume: 1490000,
    },
    {
      id: "jul-08",
      date: "2026-07-08",
      open: 188.5,
      high: 191,
      low: 187.7,
      close: 188.9,
      volume: 1330000,
    },
    {
      id: "jul-09",
      date: "2026-07-09",
      open: 188.9,
      high: 191.4,
      low: 186.3,
      close: 188.4,
      volume: 1480000,
    },
    {
      id: "jul-10",
      date: "2026-07-10",
      open: 188.4,
      high: 191.2,
      low: 186.9,
      close: 189.6,
      volume: 1210000,
    },
    {
      id: "jul-13",
      date: "2026-07-13",
      open: 189.6,
      high: 190.8,
      low: 188.6,
      close: 189.1,
      volume: 1000000,
    },
    {
      id: "jul-14",
      date: "2026-07-14",
      open: 189.1,
      high: 192.2,
      low: 187.6,
      close: 191.7,
      volume: 1620000,
    },
    {
      id: "jul-15",
      date: "2026-07-15",
      open: 191.7,
      high: 195.4,
      low: 190.8,
      close: 194.3,
      volume: 1260000,
    },
    {
      id: "jul-16",
      date: "2026-07-16",
      open: 194.3,
      high: 199,
      low: 193.5,
      close: 196.8,
      volume: 1070000,
    },
    {
      id: "jul-17",
      date: "2026-07-17",
      open: 196.8,
      high: 201.3,
      low: 195.8,
      close: 199.6,
      volume: 1430000,
    },
  ];
</script>
 
<OHLCChart ariaLabel="Atlas Energy share price, 1 June to 17 July 2026" data={ohlc} />

/** @jsxImportSource solid-js */
import { OHLCChart } from "@grassroot/charts-solid";
 
const ohlc = [
  {
    id: "jun-01",
    date: "2026-06-01",
    open: 176.4,
    high: 179.9,
    low: 176,
    close: 178.7,
    volume: 1510000,
  },
  {
    id: "jun-02",
    date: "2026-06-02",
    open: 178.7,
    high: 181.3,
    low: 177.1,
    close: 178.5,
    volume: 1900000,
  },
  {
    id: "jun-03",
    date: "2026-06-03",
    open: 178.5,
    high: 182.7,
    low: 176.4,
    close: 180.2,
    volume: 1050000,
  },
  {
    id: "jun-04",
    date: "2026-06-04",
    open: 180.2,
    high: 182,
    low: 179.5,
    close: 180.9,
    volume: 1380000,
  },
  {
    id: "jun-05",
    date: "2026-06-05",
    open: 180.9,
    high: 183.1,
    low: 180.1,
    close: 181.8,
    volume: 1820000,
  },
  {
    id: "jun-08",
    date: "2026-06-08",
    open: 181.8,
    high: 182.8,
    low: 179.4,
    close: 180.7,
    volume: 1590000,
  },
  {
    id: "jun-09",
    date: "2026-06-09",
    open: 180.7,
    high: 185.5,
    low: 179.7,
    close: 183.1,
    volume: 1550000,
  },
  {
    id: "jun-10",
    date: "2026-06-10",
    open: 183.1,
    high: 183.8,
    low: 181.8,
    close: 183.3,
    volume: 1690000,
  },
  {
    id: "jun-11",
    date: "2026-06-11",
    open: 183.3,
    high: 186.5,
    low: 182.1,
    close: 185.7,
    volume: 1570000,
  },
  {
    id: "jun-12",
    date: "2026-06-12",
    open: 185.7,
    high: 187.6,
    low: 184.1,
    close: 184.9,
    volume: 1640000,
  },
  {
    id: "jun-15",
    date: "2026-06-15",
    open: 184.9,
    high: 186.4,
    low: 184.2,
    close: 184.6,
    volume: 1280000,
  },
  {
    id: "jun-16",
    date: "2026-06-16",
    open: 184.6,
    high: 185.3,
    low: 182,
    close: 183.5,
    volume: 1980000,
  },
  {
    id: "jun-17",
    date: "2026-06-17",
    open: 183.5,
    high: 184.9,
    low: 183.1,
    close: 183.8,
    volume: 1680000,
  },
  {
    id: "jun-18",
    date: "2026-06-18",
    open: 183.8,
    high: 186.8,
    low: 182.6,
    close: 185.9,
    volume: 2020000,
  },
  {
    id: "jun-19",
    date: "2026-06-19",
    open: 185.9,
    high: 189.5,
    low: 184.1,
    close: 187.5,
    volume: 1580000,
  },
  {
    id: "jun-22",
    date: "2026-06-22",
    open: 187.5,
    high: 189,
    low: 185,
    close: 186.5,
    volume: 1130000,
  },
  {
    id: "jun-23",
    date: "2026-06-23",
    open: 186.5,
    high: 189.4,
    low: 185.6,
    close: 187.1,
    volume: 1260000,
  },
  {
    id: "jun-24",
    date: "2026-06-24",
    open: 187.1,
    high: 187.7,
    low: 184.8,
    close: 186.3,
    volume: 940000,
  },
  {
    id: "jun-25",
    date: "2026-06-25",
    open: 186.3,
    high: 188.4,
    low: 185.4,
    close: 186.4,
    volume: 1230000,
  },
  {
    id: "jun-26",
    date: "2026-06-26",
    open: 186.4,
    high: 189,
    low: 184.9,
    close: 185.3,
    volume: 1610000,
  },
  {
    id: "jun-29",
    date: "2026-06-29",
    open: 185.3,
    high: 187.7,
    low: 182.7,
    close: 185,
    volume: 1080000,
  },
  {
    id: "jun-30",
    date: "2026-06-30",
    open: 185,
    high: 187.5,
    low: 183,
    close: 184.8,
    volume: 1360000,
  },
  {
    id: "jul-01",
    date: "2026-07-01",
    open: 184.8,
    high: 188.1,
    low: 184.3,
    close: 186.1,
    volume: 1700000,
  },
  {
    id: "jul-02",
    date: "2026-07-02",
    open: 186.1,
    high: 188.9,
    low: 184.5,
    close: 187.6,
    volume: 1640000,
  },
  {
    id: "jul-03",
    date: "2026-07-03",
    open: 187.6,
    high: 189,
    low: 185.4,
    close: 187.3,
    volume: 1350000,
  },
  {
    id: "jul-06",
    date: "2026-07-06",
    open: 187.3,
    high: 188.7,
    low: 186.2,
    close: 187.2,
    volume: 950000,
  },
  {
    id: "jul-07",
    date: "2026-07-07",
    open: 187.2,
    high: 190.1,
    low: 186.7,
    close: 188.5,
    volume: 1490000,
  },
  {
    id: "jul-08",
    date: "2026-07-08",
    open: 188.5,
    high: 191,
    low: 187.7,
    close: 188.9,
    volume: 1330000,
  },
  {
    id: "jul-09",
    date: "2026-07-09",
    open: 188.9,
    high: 191.4,
    low: 186.3,
    close: 188.4,
    volume: 1480000,
  },
  {
    id: "jul-10",
    date: "2026-07-10",
    open: 188.4,
    high: 191.2,
    low: 186.9,
    close: 189.6,
    volume: 1210000,
  },
  {
    id: "jul-13",
    date: "2026-07-13",
    open: 189.6,
    high: 190.8,
    low: 188.6,
    close: 189.1,
    volume: 1000000,
  },
  {
    id: "jul-14",
    date: "2026-07-14",
    open: 189.1,
    high: 192.2,
    low: 187.6,
    close: 191.7,
    volume: 1620000,
  },
  {
    id: "jul-15",
    date: "2026-07-15",
    open: 191.7,
    high: 195.4,
    low: 190.8,
    close: 194.3,
    volume: 1260000,
  },
  {
    id: "jul-16",
    date: "2026-07-16",
    open: 194.3,
    high: 199,
    low: 193.5,
    close: 196.8,
    volume: 1070000,
  },
  {
    id: "jul-17",
    date: "2026-07-17",
    open: 196.8,
    high: 201.3,
    low: 195.8,
    close: 199.6,
    volume: 1430000,
  },
];
 
export default function OHLCChartDemo() {
  return <OHLCChart ariaLabel="Atlas Energy share price, 1 June to 17 July 2026" data={ohlc} />;
}

Installation

API Reference

Import

import { OHLCChart } from "@grassroot/charts-react";

Props

Prop

Type

Default

Requirement

Description

data

readonly OhlcDatum[]

—

required

—

legend

boolean | import("@grassroot/chart-spec").LegendConfig | undefined

—

optional

—

animation

boolean | import("./base").ExpandedChartAnimationConfig | undefined

—

optional

—

onHiddenSeriesChange

((ids: readonly string[]) => void) | undefined

—

optional

—

onActiveDatumChange

((id: string | null) => void) | undefined

—

optional

—

renderer

ChartRenderer | undefined

—

optional

—

className

string | undefined

—

optional

—

theme

import("@grassroot/theme").PartialChartTheme | undefined

—

optional

—

title

string | undefined

—

optional

—

description

string | undefined

—

optional

—

ariaLabel

string | undefined

—

optional

—

keyboardNavigation

boolean | undefined

—

optional

—

width

number | undefined

—

optional

—

Prop: data
Type: readonly OhlcDatum[]
Default: —
Requirement: required
Description: —

Prop: legend
Type: boolean | import("@grassroot/chart-spec").LegendConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: tooltip
Type: boolean | import("./base").ExpandedChartTooltipConfig<unknown> | undefined
Default: —
Requirement: optional
Description: —

Prop: animation
Type: boolean | import("./base").ExpandedChartAnimationConfig | undefined
Default: —
Requirement: optional
Description: —

Prop: onHiddenSeriesChange
Type: ((ids: readonly string[]) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: onActiveDatumChange
Type: ((id: string | null) => void) | undefined
Default: —
Requirement: optional
Description: —

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional
Description: —

Prop: className
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: theme
Type: import("@grassroot/theme").PartialChartTheme | undefined
Default: —
Requirement: optional
Description: —

Prop: title
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: description
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional
Description: —

Prop: keyboardNavigation
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: width
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: height
Type: number | undefined
Default: —
Requirement: optional
Description: —

Prop: gpuBackend
Type: ChartGpuBackend | undefined
Default: —
Requirement: optional
Description: —

Prop: rendererStrategy
Type: Partial<import("@grassroot/core").ChartRendererStrategy> | undefined
Default: —
Requirement: optional
Description: —

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: —
Requirement: optional
Description: —

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional
Description: —

Prop: interactive
Type: boolean | undefined
Default: —
Requirement: optional
Description: Gates every pointer/keyboard interaction the shell owns (hit-test on pointer move, focus-to-first, arrow navigation, Escape) and, with `keyboardNavigation`, whether the plot surface is focusable at all.

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional
Description: —

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: —

Prop: defaultActiveDatum
Type: string | null | undefined
Default: —
Requirement: optional
Description: Uncontrolled initial value for the `activeDatum`/`onActiveDatumChange` pair.

Prop: speed
Type: number | undefined
Default: —
Requirement: optional
Description: Playback-speed multiplier for entrance/ambient motion.

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional
Description: How long a dataset change tweens, in milliseconds.

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional
Description: Changing this value replays the entrance animation.

Events

Event	Payload
`onHiddenSeriesChange`	`((ids: readonly string[]) => void) \| undefined`
`onActiveDatumChange`	`((id: string \| null) => void) \| undefined`

Content regions

children
dataSummary

Native attributes

Standard DOM and ARIA attributes not listed above spread onto the root element.

Import

import { OHLCChart } from "@grassroot/charts-vue";

Props

Prop

Type

Default

Requirement

className

string | undefined

—

optional

gpuBackend

"auto" | "webgpu" | "webgl2" | undefined

—

optional

width

number | undefined

—

optional

height

number | undefined

—

optional

renderer

ChartRenderer | undefined

—

optional

rendererStrategy

Partial<ChartRendererStrategy> | undefined

—

optional

renderPlanMode

"svg" | "host" | undefined

"host"

optional

showGrid

boolean | undefined

—

optional

legend

boolean | LegendConfig | undefined

false

optional

animation

ChartAnimationInput | undefined

—

optional

interactive

boolean | undefined

true

optional

keyboardNavigation

boolean | undefined

true

optional

hiddenSeries

readonly string[] | undefined

—

optional

Prop: className
Type: string | undefined
Default: —
Requirement: optional

Prop: gpuBackend
Type: "auto" | "webgpu" | "webgl2" | undefined
Default: —
Requirement: optional

Prop: width
Type: number | undefined
Default: —
Requirement: optional

Prop: height
Type: number | undefined
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer | undefined
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy> | undefined
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host" | undefined
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean | undefined
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig | undefined
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig | undefined
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput | undefined
Default: —
Requirement: optional

Prop: interactive
Type: boolean | undefined
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean | undefined
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[] | undefined
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[] | undefined
Default: () => []
Requirement: optional

Prop: activeDatum
Type: string | null | undefined
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null | undefined
Default: null
Requirement: optional

Prop: speed
Type: number | undefined
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number | undefined
Default: —
Requirement: optional

Prop: replayToken
Type: string | number | undefined
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme | undefined
Default: —
Requirement: optional

Prop: title
Type: string | undefined
Default: —
Requirement: optional

Prop: description
Type: string | undefined
Default: —
Requirement: optional

Prop: ariaLabel
Type: string | undefined
Default: —
Requirement: optional

Prop: data
Type: readonly OhlcDatum[]
Default: —
Requirement: required

Events

Event	Payload
`hiddenSeriesChange`	`[ids: readonly string[]]`
`activeDatumChange`	`[id: string \| null]`

Content regions

dataSummary
default

Import

import { ChangeDetectionStrategy, Component } from "@angular/core";
import { GrassrootOHLCChart } from "@grassroot/charts-angular";

Props

Prop

Type

Default

Requirement

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

ariaLabel

string

—

optional

title

string

—

optional

description

string

—

optional

theme

PartialChartTheme

—

optional

animation

ChartAnimationInput

—

optional

interactive

boolean

true

optional

keyboardNavigation

boolean

true

optional

legend

boolean | LegendConfig

—

optional

hiddenSeries

readonly string[]

—

optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: []
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: null
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: data
Type: readonly OhlcDatum[]
Default: —
Requirement: required

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: className
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`activeDatumChange`	`string \| null`
`hiddenSeriesChange`	`readonly string[]`

Content regions

dataSummary
default

Import

import { OHLCChart } from "@grassroot/charts-svelte";

Props

Prop

Type

Default

Requirement

data

readonly OhlcDatum[]

—

required

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

onActiveDatumChange

(id: string | null) => void

—

optional

class

string

—

optional

style

string

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

—

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

false

optional

Prop: data
Type: readonly OhlcDatum[]
Default: —
Requirement: required

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: string
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: —
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: false
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: true
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: true
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: true
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`
`onActiveDatumChange`	`(id: string \| null) => void`

Content regions

children
dataSummary

Import

import { OHLCChart } from "@grassroot/charts-solid";

Props

Prop

Type

Default

Requirement

data

readonly OhlcDatum[]

—

required

onActiveDatumChange

(id: string | null) => void

—

optional

onHiddenSeriesChange

(ids: readonly string[]) => void

—

optional

class

string

—

optional

style

JSX.CSSProperties

—

optional

width

number

—

optional

height

number

—

optional

renderer

ChartRenderer

—

optional

gpuBackend

ChartGpuBackend

"auto"

optional

rendererStrategy

Partial<ChartRendererStrategy>

—

optional

renderPlanMode

"svg" | "host"

"host"

optional

showGrid

boolean

—

optional

legend

boolean | LegendConfig

—

optional

Prop: data
Type: readonly OhlcDatum[]
Default: —
Requirement: required

Prop: onActiveDatumChange
Type: (id: string | null) => void
Default: —
Requirement: optional

Prop: onHiddenSeriesChange
Type: (ids: readonly string[]) => void
Default: —
Requirement: optional

Prop: class
Type: string
Default: —
Requirement: optional

Prop: style
Type: JSX.CSSProperties
Default: —
Requirement: optional

Prop: width
Type: number
Default: —
Requirement: optional

Prop: height
Type: number
Default: —
Requirement: optional

Prop: renderer
Type: ChartRenderer
Default: —
Requirement: optional

Prop: gpuBackend
Type: ChartGpuBackend
Default: "auto"
Requirement: optional

Prop: rendererStrategy
Type: Partial<ChartRendererStrategy>
Default: —
Requirement: optional

Prop: renderPlanMode
Type: "svg" | "host"
Default: "host"
Requirement: optional

Prop: showGrid
Type: boolean
Default: —
Requirement: optional

Prop: legend
Type: boolean | LegendConfig
Default: —
Requirement: optional

Prop: tooltip
Type: boolean | TooltipBehaviorConfig
Default: —
Requirement: optional

Prop: animation
Type: ChartAnimationInput
Default: —
Requirement: optional

Prop: interactive
Type: boolean
Default: —
Requirement: optional

Prop: keyboardNavigation
Type: boolean
Default: —
Requirement: optional

Prop: hiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: defaultHiddenSeries
Type: readonly string[]
Default: —
Requirement: optional

Prop: activeDatum
Type: string | null
Default: —
Requirement: optional

Prop: defaultActiveDatum
Type: string | null
Default: —
Requirement: optional

Prop: speed
Type: number
Default: —
Requirement: optional

Prop: morphDurationMs
Type: number
Default: —
Requirement: optional

Prop: replayToken
Type: string | number
Default: —
Requirement: optional

Prop: theme
Type: PartialChartTheme
Default: —
Requirement: optional

Prop: title
Type: string
Default: —
Requirement: optional

Prop: description
Type: string
Default: —
Requirement: optional

Prop: ariaLabel
Type: string
Default: —
Requirement: optional

Events

Event	Payload
`onActiveDatumChange`	`(id: string \| null) => void`
`onHiddenSeriesChange`	`(ids: readonly string[]) => void`

Content regions

children
dataSummary