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!!

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!