Help - Anyone succeeded using ChartjsNodeCanvas with chartjs-chart-financial and candlestick in a browserless Node.js project ?

[foligny]

Anyone succeeded using ChartjsNodeCanvas with chartjs-chart-financial and candlestick in a browserless Node.js project ?

Something like this, but it doesnt work. I cannot register chartjs-chart-financial candlestick type.

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
import { _adapters, ChartConfiguration } from 'chart.js/auto';
import 'chartjs-adapter-luxon';
//require('chartjs-adapter-luxon/dist/chartjs-adapter-luxon.umd.js');
import { DateTime } from 'luxon';
import * as fs from 'fs';

describe('Financial Chart Tests', () => {
  beforeAll(() => {
    // Ensure Chart is registered before tests
  });

  it('should generate a candlestick chart', async () => {
    // Create the chart instance
    const chartJSNodeCanvas = new ChartJSNodeCanvas({
      width: 800,
      height: 400,
      backgroundColour: 'white', plugins: {
        modern: ['chartjs-chart-financial']
      }
    });

    // Sample data
    const data = [
      { x: DateTime.fromISO('2024-01-01').valueOf(), o: 100, h: 105, l: 98, c: 103 },
      { x: DateTime.fromISO('2024-01-02').valueOf(), o: 103, h: 108, l: 102, c: 106 },
      { x: DateTime.fromISO('2024-01-03').valueOf(), o: 106, h: 110, l: 104, c: 105 }
    ];

    const configuration: ChartConfiguration = {
      type: 'candlestick',
      data: {
        datasets: [{
          label: 'STOCK',
          data: data
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day'
            }
          },
          y: {
            type: 'linear'
          }
        }
      }
    };

    // Generate chart
    const image = await chartJSNodeCanvas.renderToBuffer(configuration);
    fs.writeFileSync('candlestick-chart.png', image);

    // Assertions
    expect(fs.existsSync('candlestick-chart.png')).toBe(true);
    const stats = fs.statSync('candlestick-chart.png');
    expect(stats.size).toBeGreaterThan(0);
  });
});

I also tried with registering

import { ChartJSNodeCanvas } from 'chartjs-node-canvas';
import { Chart, ChartConfiguration } from 'chart.js';
import { CandlestickController, CandlestickElement } from 'chartjs-chart-financial';
import { _adapters } from 'chart.js/auto';
import 'chartjs-adapter-luxon';
//require('chartjs-adapter-luxon/dist/chartjs-adapter-luxon.umd.js');
import { DateTime } from 'luxon';
import * as fs from 'fs';

// Register the candlestick components
Chart.register(CandlestickController, CandlestickElement);

describe('Financial Chart Tests', () => {
  beforeAll(() => {
    // Ensure Chart is registered before tests
  });

  it('should generate a candlestick chart', async () => {
    // Create the chart instance
    const chartJSNodeCanvas = new ChartJSNodeCanvas({
      width: 800,
      height: 400,
      backgroundColour: 'white', plugins: {
        modern: ['chartjs-chart-financial']
      }
    });

    // Sample data
    const data = [
      { x: DateTime.fromISO('2024-01-01').valueOf(), o: 100, h: 105, l: 98, c: 103 },
      { x: DateTime.fromISO('2024-01-02').valueOf(), o: 103, h: 108, l: 102, c: 106 },
      { x: DateTime.fromISO('2024-01-03').valueOf(), o: 106, h: 110, l: 104, c: 105 }
    ];

    const configuration = {
      type: 'candlestick' as const,
      data: {
        datasets: [{
          label: 'STOCK',
          data: data
        }]
      },
      options: {
        responsive: true,
        scales: {
          x: {
            type: 'time',
            time: {
              unit: 'day'
            }
          },
          y: {
            type: 'linear'
          }
        }
      }
    } satisfies ChartConfiguration;

    // Generate chart
    const image = await chartJSNodeCanvas.renderToBuffer(configuration);
    fs.writeFileSync('candlestick-chart.png', image);

    // Assertions
    expect(fs.existsSync('candlestick-chart.png')).toBe(true);
    const stats = fs.statSync('candlestick-chart.png');
    expect(stats.size).toBeGreaterThan(0);
  });
});

But I get the error

    TypeError: Cannot read properties of undefined (reading 'prototype')

       9 |
      10 | // Register the candlestick components
    > 11 | Chart.register(CandlestickController, CandlestickElement);
         |       ^

Thanks!