How to integrate chartjs-chart-financial with chart js

Question

I'd like to use chartjs-chart-financial to plot a 'candlestick' chart. However, chartjs-chart-financial isn't published to npm yet. I run an npm install followed by gulp build in the directory that has the cloned repo from https://github.com/chartjs/chartjs-chart-financial. I see chartjs-chart-financial.js in the dist folder after it has built. However, I'm clueless as to how to get this to integrate with the base chart.js library, so that I can specify a type: candlestick on my Chart. I haven't been able to come across any examples where this is demonstrated..

I'm currently using react-chartjs-2 as a wrapper around chart.js since I'm working in React:

import React, { Component } from 'react';
import Chart from '../node_modules/chart.js/dist/chart';

class Financial extends Component {
    constructor() {
        super();
        this.myRef = React.createRef();
    }

    componentDidMount() {
        const ctx = this.myRef.current;
        this.myChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ["A", "B", "C"],
                datasets: [{
                    label: 'Test',
                    data: [12, 20, 15],
                    backgroundColor: 'gray'
                }]
            }
        });
    }
    
    render() {
        return (
            <canvas ref={this.myRef}/>
        );
    }
}

export default Financial;

As you can see, I'm rendering a sample chart with type bar for now. I'd like to be able to use type 'candlestick' instead, along with its associated dataset.

I'd appreciate any help!!

Suannesuarez

If you see chartjs-chart-financial in your node_modules directory, then you should be able to import it just like any other npm package – Bennett

Hi, thanks for your response! The issue is that chartjs-chart-financial is a UMD module in the form of an immediately-invoked function. In their only example, they just insert the reference to the file in the <script> tag: chartjs.org/chartjs-chart-financial . I'm not sure how to translate this into 'invoking' the IIFE within my React code. – Suannesuarez

To anyone who might be reading this in the future - you need access to the file chartjs-chart-financial.js after it has been built. This will usually be in your dist directory. If you're using something like webpack, make sure that you set the configurations so that it ignores this file and doesn't transpile it down to es5. You can then simply use this by an import statement: import './my-path/chartjs-chart-financial'; – Suannesuarez

Answer 1

You can use this package in your app without NPM repository. Only need this simple "trick" in your package.json:

  "dependencies": {
    "chartjs-chart-financial": "github:chartjs/chartjs-chart-financial"
  }

Important note: The GitHub repository must have a package.json file!

Varipapa