chartjs-chart-financial

Chart.js requires a date library and an adapter to handle time scales. For financial charts, it is recommended to use chartjs-adapter-luxon because it provides the best support for internationalization (i18n) and time zones.

Note on IE Support: If you need to support Internet Explorer, you must provide polyfills for Luxon, or consider using alternative date libraries like Moment or date-fns which may be easier to polyfill.

To build the project from source, use npm to install dependencies and gulp to run the build process.

npm install
gulp build

Interactive examples demonstrating Candlestick and OHLC charts are available at the official documentation site.

https://chartjs.github.io/chartjs-chart-financial/

The FinancialController expects data points to contain specific financial properties. When the controller calculates element properties (like position and size), it maps the following keys from your data objects to the chart elements:

• o: Open
• h: High
• l: Low
• c: Close
• x: The temporal/index value (used for the x-axis)

These values are used to determine the base (typically the low value), the y position (the midpoint between low and high), and the specific pixel coordinates for each price point.

Once registered, you can create financial charts by specifying the type in your Chart.js configuration. The available types are:

• candlestick: For rendering candlestick charts.
• ohlc: For rendering Open-High-Low-Close charts.

// Example configuration for a candlestick chart
const config = {
  type: 'candlestick',
  data: { /* ... */ },
  options: { /* ... */ }
};

To use financial charts (Candlestick and OHLC) in your Chart.js application, you must register the controllers and elements provided by chartjs-chart-financial. This allows Chart.js to recognize the candlestick and ohlc chart types and their corresponding rendering elements.

import { Chart } from 'chart.js';
import { CandlestickController, OhlcController, CandlestickElement, OhlcElement } from 'chartjs-chart-financial';

// Register the financial components
Chart.register(CandlestickController, OhlcController, CandlestickElement, OhlcElement);

The FinancialElement class provides default color configurations for financial chart elements (like bars or candles). You can customize these colors via the defaults object. The colors are categorized by the state of the data point: up (positive movement), down (negative movement), and unchanged (no movement).

// Example of the default configuration structure
FinancialElement.defaults = {
  backgroundColors: {
    up: 'rgba(75, 192, 192, 0.5)',
    down: 'rgba(255, 99, 132, 0.5)',
    unchanged: 'rgba(201, 203, 207, 0.5)',
  },
  borderColors: {
    up: 'rgb(75, 192, 192)',
    down: 'rgb(255, 99, 132)',
    unchanged: 'rgb(201, 203, 207)',
  }
};

The FinancialController (the base for financial chart types) comes with several default configuration overrides. When using financial charts, these defaults are applied to your chart configuration:

• Parsing: Set to false by default.
• Hover Mode: Set to 'label'.
• Animations: Supports animating the following properties: x, y, base, width, open, high, low, and close.
• Scales:
  • x-axis: Defaults to type: 'timeseries' with offset: true. It includes specific tick configurations like autoSkip: true and source: 'data'.
  • y-axis: Defaults to type: 'linear'.
• Tooltip: Configured with intersect: false and mode: 'index'. It includes a custom callback that formats the label to show Open, High, Low, and Close values (O: {o} H: {h} L: {l} C: {c}).

The candlestick element type allows you to customize the visual appearance of financial candlestick charts. You can configure colors for different price movements (up, down, or unchanged) and set the border width.

Key configuration options include:

• borderColors: Can be a single string applied to all candles, or an object specifying colors for different states:
  • up: Color used when close < open (Note: The implementation logic uses up for price drops and down for price gains).
  • down: Color used when close > open.
  • unchanged: Color used when close === open.
• backgroundColors: An object specifying colors for different states:
  • up: Background color for price drops.
  • down: Background color for price gains.
  • unchanged: Background color for unchanged prices.
• borderWidth: The thickness of the candlestick borders.

The OhlcController is used to render Open-High-Low-Close (OHLC) financial charts. It extends the FinancialController and uses OhlcElement as its default data element type.

When configuring datasets for an OHLC chart, you can use the following default options to control the width of the bars:

• barPercentage: Controls the bar width relative to the category width. Default is 1.0.
• categoryPercentage: Controls the category width relative to the available space. Default is 1.0.

// Example configuration for an OHLC dataset
const config = {
  type: 'ohlc',
  data: {
    datasets: [{
      data: [...],
      barPercentage: 1.0,
      categoryPercentage: 1.0
    }]
  }
};