JavaScript OHLC Chart - Editor

ohlc trading xy date-time

Also known as Price Chart, Bar Chart

What does OHLC chart mean?

OHLC stands for open, high, low, and close. OHLC charts are important because they show the value of a stock over time. The opening price is the price at which a stock was first traded for the day, and it will usually be either higher or lower than the previous day's closing price, depending on how well the stock market has done. The highest price is simply the maximum amount that a share can sell for in order to buy. The lowest point is called the low, and it's simply what it sounds like: the lowest point of trading for that given day.

What is the function of an OHLC chart in the stock market?

An OHLC chart can be useful for analyzing how a stock's value fluctuates over time. When looking at this chart, it is important to note that the range for each bar will typically depend on the time period being analyzed (e.g., daily or weekly).

How to read the OHLC chart?

The vertical line on an OHLC chart represents the change in price movement from opening to closing and will have four points: the high point at which the highest price is reached during that day's trading session, the low point at which the lowest price is reached during that day's trading session, and finally, the opening and closing prices for that day.

This example shows basic implementation of OHLC chart using OHLC-series.

// OHLCSeries exists inside XY-charts.
const chart = lightningChart().ChartXY();
const ohlcSeries = chart.addOHLCSeries(
  // Specify type of figure used
  { positiveFigure: OHLCFigures.Bar }
);

OHLC-series accept data in the form of interface 'XOHLC':

const xohlc = [
  // X-position
  0,
  // Opening Y-value
  100,
  // Highest Y-value
  200,
  // Lowest Y-value
  50,
  // Closing Y-value
  75,
];
// Add new segment to series.
ohlcSeries.add(xohlc);

add() can be called with a single XOHLC-object or with an array of them.

Anatomy of a Bar figure

A bar figure is formed from three line segments, which can be styled with a single LineStyle object.

Figure styling

OHLC Series provides an ability to specify styles for both positive and negative candlesticks individually.

// Width of both positive and negative candlesticks
const figureWidth = 5.0;
// Green color filling
const fillStylePositive = new SolidFill().setColor(ColorRGBA(0, 128, 0));
// Lime color filling
const fillStyleHighlightPositive = new SolidFill().setColor(
  ColorRGBA(0, 255, 0)
);
// Black color stroke
const bodyStrokeStyle = new SolidLine()
  .setFillStyle(new SolidFill().setColor(ColorRGBA(0, 0, 0)))
  .setThickness(1.0);
// Green color stroke
const strokeStylePositive = new SolidLine().setFillStyle(
  new SolidFill().setColor(ColorRGBA(0, 128, 0))
);
// Lime color stroke
const strokeStylePositiveHighlight = new SolidLine().setFillStyle(
  new SolidFill().setColor(ColorRGBA(0, 240, 0))
);

ohlcSeries
  // Setting width of figures
  .setFigureWidth(figureWidth)
  // Styling positive candlestick
  .setPositiveStyle((candlestick) =>
    candlestick
      // Candlestick body fill style
      .setBodyFillStyle(fillStylePositive)
      // Candlestick body fill style when highlighted
      .setBodyFillStyleHighlight(fillStyleHighlightPositive)
      // Candlestick body stroke style
      .setBodyStrokeStyle(bodyStrokeStyle)
      // Candlestick stroke style
      .setStrokeStyle(strokeStylePositive)
      // Candlestick stroke style when highlighted
      .setStrokeStyleHighlight(strokeStylePositiveHighlight)
  )
  // Styling negative candlestick
  .setNegativeStyle(
    (candlestick) => candlestick
    // etc ...
  );