4

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

Atif Farooq
  • 41
  • 1
  • 2
  • 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 – GalAbra Sep 19 '20 at 06:23
  • 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 ` – Atif Farooq Sep 19 '20 at 07:20
  • 2
    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';` – Atif Farooq Sep 25 '20 at 08:49

0 Answers0