How to use chartjs-chart-financial

Describe the bug How to use an external chart, like chartjs-chart-financial? How to register the ‘plugin’ with Chartjs?

I tried this:

import { OhlcElement, OhlcController, CandlestickElement, CandlestickController } from 'chartjs-chart-financial'
import Chart from 'chart.js/auto' // Easy way of importing everything

Chart.register(OhlcElement, OhlcController, CandlestickElement, CandlestickController)

However, I get a TypeError: Cannot read property 'register' of undefined.

How should I do this?

Versions

• NodeJS version: 14.18.1
• Chart.JS version: 3.6.0
• Typescript version: 4.4.4

[mercteil]

I managed it to run properly with everything.

I will follow up shortly with a working example posting here. Thank you for looking into it.

[SeanSobey]

Hi @dimisus,

Yeah, I had a propper look now and unfortunately getting the new(ish) adaptors working is not simple and definitely needs to be addressed in forthcoming versions of this lib. I managed to get it working with the below (at least I think so, based on the image 😃 ):

import { ChartJSNodeCanvas, ChartCallback, freshRequire } from './'; // Change to 'chartjs-node-canvas'
import { ChartConfiguration } from 'chart.js';
import { promises as fs } from 'fs';
import 'chartjs-chart-financial'; // For types only!

const width = 400;
const height = 400;
const configuration: ChartConfiguration = {
	type: 'candlestick',
	data: {
		datasets: [
			{
				label: 'some data',
				data: [
					{
						"x": 1491004800000,
						"o": 30.33,
						"h": 33.33,
						"l": 30.27,
						"c": 31.61
					},
					{
						"x": 1491177600000,
						"o": 32.17,
						"h": 37.09,
						"l": 31.7,
						"c": 33.75
					},
					{
						"x": 1491264000000,
						"o": 34.81,
						"h": 36.73,
						"l": 34.3,
						"c": 36.18
					},
					{
						"x": 1491350400000,
						"o": 36.95,
						"h": 40.58,
						"l": 33.43,
						"c": 37.19
					},
					{
						"x": 1491436800000,
						"o": 37.78,
						"h": 40.17,
						"l": 34.3,
						"c": 38.78
					},
					{
						"x": 1491523200000,
						"o": 38.18,
						"h": 41.52,
						"l": 36.58,
						"c": 37.21
					},
				]
			},
		],
	},
	options: {},
};
const chartJSNodeCanvas = new ChartJSNodeCanvas({
	width, height, plugins: {
		modern: [ 'chartjs-chart-financial' ],
		globalVariableLegacy: [ 'chartjs-adapter-luxon' ]
	}
});

// Needs to run after the constructor but before any render function
(global as any).window = (global as any).window || {};
(global as any).window.luxon = freshRequire('luxon'); // Can just use normal require();

async function main(): Promise<void> {

	const buffer = await chartJSNodeCanvas.renderToBuffer(configuration);
	await fs.writeFile('./example.png', buffer, 'base64');
}
main();

node version: 16.13.0 this lib version: 4.1.6

deps:

{
...
    "chart.js": "^3.5.1",
    canvas": "^2.8.0",
    "chartjs-adapter-luxon": "^1.1.0",
    "chartjs-chart-financial": "^0.1.1",
    "luxon": "^2.3.0",
}