OHLC.

PRO

Read four prices from a high-low line and open-close ticks.

<sy-ohlc-chart>Installation and integration API reference

LIVE EXAMPLE

OHLC bars

Match the page theme

Interact with the chart to see selection and range-change results here.

Show the four prices with thin lines and ticks. All values are sample data.

View code

Current preview

<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-ohlc-chart.js';
  define0();

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-ohlc-chart",
      "props": {
        "data": [
          {
            "time": 1767225600000,
            "open": 100,
            "close": 95,
            "high": 103,
            "low": 92,
            "volume": 1200
          },
          {
            "time": 1767312000000,
            "open": 104,
            "close": 106,
            "high": 109,
            "low": 101,
            "volume": 1337
          },
          {
            "time": 1767398400000,
            "open": 107,
            "close": 105,
            "high": 110,
            "low": 102,
            "volume": 1474
          },
          {
            "time": 1767484800000,
            "open": 109,
            "close": 114,
            "high": 117,
            "low": 106,
            "volume": 1611
          },
          {
            "time": 1767571200000,
            "open": 108,
            "close": 109,
            "high": 112,
            "low": 105,
            "volume": 1748
          },
          {
            "time": 1767657600000,
            "open": 106,
            "close": 103,
            "high": 109,
            "low": 100,
            "volume": 1885
          },
          {
            "time": 1767744000000,
            "open": 102,
            "close": 106,
            "high": 109,
            "low": 99,
            "volume": 2022
          },
          {
            "time": 1767830400000,
            "open": 100,
            "close": 100,
            "high": 103,
            "low": 97,
            "volume": 2159
          },
          {
            "time": 1767916800000,
            "open": 98,
            "close": 94,
            "high": 101,
            "low": 91,
            "volume": 2296
          },
          {
            "time": 1768003200000,
            "open": 99,
            "close": 102,
            "high": 105,
            "low": 96,
            "volume": 2433
          },
          {
            "time": 1768089600000,
            "open": 101,
            "close": 100,
            "high": 104,
            "low": 97,
            "volume": 2570
          },
          {
            "time": 1768176000000,
            "open": 105,
            "close": 100,
            "high": 108,
            "low": 97,
            "volume": 2707
          },
          {
            "time": 1768262400000,
            "open": 109,
            "close": 111,
            "high": 114,
            "low": 106,
            "volume": 2844
          },
          {
            "time": 1768348800000,
            "open": 113,
            "close": 111,
            "high": 116,
            "low": 108,
            "volume": 2981
          },
          {
            "time": 1768435200000,
            "open": 115,
            "close": 120,
            "high": 123,
            "low": 112,
            "volume": 1318
          },
          {
            "time": 1768521600000,
            "open": 115,
            "close": 116,
            "high": 119,
            "low": 112,
            "volume": 1455
          },
          {
            "time": 1768608000000,
            "open": 114,
            "close": 111,
            "high": 117,
            "low": 108,
            "volume": 1592
          },
          {
            "time": 1768694400000,
            "open": 111,
            "close": 115,
            "high": 118,
            "low": 108,
            "volume": 1729
          },
          {
            "time": 1768780800000,
            "open": 108,
            "close": 108,
            "high": 111,
            "low": 105,
            "volume": 1866
          },
          {
            "time": 1768867200000,
            "open": 105,
            "close": 101,
            "high": 108,
            "low": 98,
            "volume": 2003
          },
          {
            "time": 1768953600000,
            "open": 105,
            "close": 108,
            "high": 111,
            "low": 102,
            "volume": 2140
          },
          {
            "time": 1769040000000,
            "open": 107,
            "close": 106,
            "high": 110,
            "low": 103,
            "volume": 2277
          },
          {
            "time": 1769126400000,
            "open": 110,
            "close": 105,
            "high": 113,
            "low": 102,
            "volume": 2414
          },
          {
            "time": 1769212800000,
            "open": 114,
            "close": 116,
            "high": 119,
            "low": 111,
            "volume": 2551
          },
          {
            "time": 1769299200000,
            "open": 119,
            "close": 117,
            "high": 122,
            "low": 114,
            "volume": 2688
          },
          {
            "time": 1769385600000,
            "open": 121,
            "close": 126,
            "high": 129,
            "low": 118,
            "volume": 2825
          },
          {
            "time": 1769472000000,
            "open": 123,
            "close": 124,
            "high": 127,
            "low": 120,
            "volume": 2962
          },
          {
            "time": 1769558400000,
            "open": 121,
            "close": 118,
            "high": 124,
            "low": 115,
            "volume": 1299
          },
          {
            "time": 1769644800000,
            "open": 119,
            "close": 123,
            "high": 126,
            "low": 116,
            "volume": 1436
          },
          {
            "time": 1769731200000,
            "open": 116,
            "close": 116,
            "high": 119,
            "low": 113,
            "volume": 1573
          },
          {
            "time": 1769817600000,
            "open": 113,
            "close": 109,
            "high": 116,
            "low": 106,
            "volume": 1710
          },
          {
            "time": 1769904000000,
            "open": 112,
            "close": 115,
            "high": 118,
            "low": 109,
            "volume": 1847
          }
        ],
        "barStyle": "ohlc",
        "timeScale": "ordinal",
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'ohlc example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    container.replaceChildren();
  }
</script>

Usage and data

Use to display many price bars compactly.

Uses the same data format as Candlestick. Keep time zones and intervals consistent.

Data contract

Property	Input format
`data`	A price array with time, open, high, low, and close.
`barStyle`	The tick style: ohlc, hlc, or hilo.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Add to your interface

The code tabs below the preview contain the full data, options, event bindings, and responsive sizing for the current example. Copy them into an app project, such as Vite, that can resolve the installed packages.

Shared sy-chart API versus direct tags

API reference

The full public API for sy-ohlc-chart. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / Property	Type / Default	Description
barStyle	`'ohlc' \| 'hlc' \| 'hilo'`Default: 'ohlc'	The tick style: ohlc, hlc, or hilo.
	`CandlestickData`Default: undefined	A price array with time, open, high, low, and close.
	`number`Default: 900	Chart width in pixels. Update with ResizeObserver when the container changes.
	`number`Default: 360	Chart height in pixels.
brandLogo	`string`Default: undefined	The default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL.
brandPosition	`'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'`Default: 'bottom-right'	The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports.
xAxis	`CartesianAxisInput`Default: undefined	Allowed values: auto, off. Default: undefined.
yAxis	`YAxisInput`Default: undefined	Allowed values: auto, off. Default: undefined.
gridLines	`CartesianGridLinesInput`Default: undefined	Allowed values: auto, off. Default: undefined.
	`CartesianCrosshairInput`Default: undefined	Crosshair that follows the cursor across the plot (forwarded; the inner `crosshairMove` bubbles through the host).
	`CartesianZoomInput`Default: undefined	Settings for zooming and the visible range.
upColor	`string`Default: '#26a69a'	Set as an HTML attribute or JavaScript property. type: string.
downColor	`string`Default: '#ef5350'	Set as an HTML attribute or JavaScript property. type: string.
candleWidth	`number`Default: 0.7	The tick length's share of the bar pitch (the candle body ratio; 0.7 by default).
wickWidth	`number`Default: 1	The spine and tick thickness in CSS px.
timeScale	`CandlestickTimeScale`Default: 'ordinal'	Allowed values: linear, ordinal. Default: 'ordinal'.
	`CandlestickVolumeMode`Default: 'off'	Allowed values: off, pane. Default: 'off'.
volumeHeight	`number`Default: 0.25	Set as an HTML attribute or JavaScript property. type: number.
chartTitle	`string`Default: undefined	The title inside the chart. Explain the data's unit and meaning alongside it.
chartSubtitle	`string`Default: undefined	The subtitle inside the chart.
	`CartesianTooltipInput`Default: undefined	Tooltip settings for pointer-driven values, position, and content.
tooltipEnabled	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
animated	`boolean`Default: false	Whether to animate initial display and data changes.
animationDuration	`number`Default: 600	Animation duration in milliseconds.
animationEasing	`CandlestickEasing`Default: 'ease-out'	Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationType	`CandlestickAnimationType`Default: undefined	Allowed values: initial, update. Default: undefined.

Other properties 29

Attribute / Property	Type / Default	Description
xMin	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
xMax	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
yMin	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
yMax	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
	`number`Default: 0.05	Set as an HTML attribute or JavaScript property. type: number.
flatColor	`string`Default: '#9ca3af'	Set as an HTML attribute or JavaScript property. type: string.
candleMinPx	`number`Default: 1	Set as an HTML attribute or JavaScript property. type: number.
candleMaxPx	`number`Default: 40	Set as an HTML attribute or JavaScript property. type: number.
tickLength	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
fillAlpha	`number`Default: undefined	Set as an HTML attribute or JavaScript property. type: number.
bodyMinPx	`number`Default: 1	Set as an HTML attribute or JavaScript property. type: number.
bodyStyle	`CandlestickBodyStyle`Default: 'solid'	Candle-only lanes, forwarded for parity (an OHLC bar has no body to hollow).
bodyBorderPx	`number`Default: 1	Set as an HTML attribute or JavaScript property. type: number.
wickColor	`string`Default: 'auto'	Set as an HTML attribute or JavaScript property. type: string.
	`CandlestickAntialias`Default: 'auto'	Allowed values: auto, off, on. Default: 'auto'.
pixelSnap	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
	`CandlestickSessionInput \| string`Default: '24x7'	Pass as a JavaScript property. type: CandlestickSessionInput \| string.
labelLocale	`string`Default: 'en-US'	Set as an HTML attribute or JavaScript property. type: string.
volumeUpColor	`string`Default: 'auto'	Set as an HTML attribute or JavaScript property. type: string.
volumeDownColor	`string`Default: 'auto'	Set as an HTML attribute or JavaScript property. type: string.
volumeAlpha	`number`Default: 0.45	Set as an HTML attribute or JavaScript property. type: number.
	`CandlestickOverlayInput \| string`Default: undefined	Pass as a JavaScript property. type: CandlestickOverlayInput \| string.
enableMouseTracking	`boolean`Default: true	Set as an HTML attribute or JavaScript property. type: boolean.
tooltipFormat	`(detail: CandlestickPointEventDetail) => string`Default: undefined	Pass as a JavaScript property. type: (detail: CandlestickPointEventDetail) => string.
streamSource	`CandlestickStreamSource`Default: undefined	A stream source for live data. Check the contract for the specific type.
streamMax	`number`Default: undefined	The maximum number of streaming data points to retain.
streamWindow	`number`Default: undefined	The streaming data range to keep visible.
	`CandlestickEngineMode`Default: 'auto'	Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
	`CandlestickUnavailableBehaviour`Default: 'fallback'	Allowed values: fallback, error. Default: 'fallback'.

Methods 35

Stencil methods return Promises. Use await within an async function to read the result.

Method / Arguments	Return type	Description
	`Promise<ChartDataTable>`	Current normalized table, including the retained stream; independent of GPU availability.
	`Promise<CandlestickRenderResult>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickEngineTier>`	An asynchronous method. Check the argument and return types below.
	`Promise<string \| undefined>`	An asynchronous method. Check the argument and return types below.
data: CandlestickData	`Promise<void>`	An asynchronous method. Check the argument and return types below.
bar: CandlestickBarInput	`Promise<void>`	An asynchronous method. Check the argument and return types below.
bars: ReadonlyArray<CandlestickBarInput>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
count: number	`Promise<void>`	An asynchronous method. Check the argument and return types below.
bars: ReadonlyArray<CandlestickBarInput>	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickStreamSource \| undefined>`	An asynchronous method. Check the argument and return types below.
options: { duration?: number; easing?: CandlestickEasing; enabled?: boolean; type?: CandlestickAnimationType }	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
cssX: number, cssY: number	`Promise<CandlestickPointEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CandlestickBar \| null>`	An asynchronous method. Check the argument and return types below.
time: number	`Promise<(CandlestickBar & { index: number }) \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<number>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickExtent>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickDomain>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickVisibleRange>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CartesianTooltipEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<void>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<CandlestickPointEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickOverlayState[]>`	An asynchronous method. Check the argument and return types below.
index: number	`Promise<Record<string, number \| null>>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickPaneRects>`	An asynchronous method. Check the argument and return types below.
	`Promise<CandlestickTimeScaleState>`	An asynchronous method. Check the argument and return types below.
request: CartesianZoomRequest	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
factor: number, anchorFraction?: number	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
delta: { x?: number; y?: number }	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianZoomChangeEventDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<CartesianZoomState \| null>`	An asynchronous method. Check the argument and return types below.
request?: CartesianZoomExtentRequest	`Promise<CartesianZoomExtentDetail \| null>`	An asynchronous method. Check the argument and return types below.
	`Promise<ChartEngineStatus>`	Requested engine vs what runs, and why (CHART-ADD-08): the inner candlestick's own status once it is mounted (it gates chart.type.ohlc and chart.type.candlestick); before that, this proxy's chart.type.ohlc decision, read without side effects.

OHLC forwards bubbling events from its internal Candlestick chart, including pointClick, pointHover, and rendered.

OHLC.

OHLC bars

Usage and data

Data contract

Updating data

Feature examples

HLC representationPRO

Volume panelPRO

Inspect values with the pointerPRO

Crosshair trackingPRO

Drag to zoom and panPRO

Replay animationPRO

AnimationPRO

AxisPRO

CrosshairPRO

Data inputPRO

Large datasetsPRO

SizePRO

StylePRO

TooltipPRO

Zoom and panPRO

Context menuPRO

Data context menuPRO

Read coordinates and dataPRO

OverviewPRO

Streaming · Add and update live dataPRO

Add to your interface

API reference

Key properties