How to use chart-financial using npm and webpack?

[thezentrader]

Hello,

I am using npm to download the chart-js-financial module by pointing to the repo:

"dependencies": {
    "chart.js": "^3.0.0-beta.6",
    "chartjs-chart-financial": "github:chartjs/chartjs-chart-financial#master",
}

Here is how I am importing it into my JS files:

import {BarController, BarElement, Chart, LineController, LineElement, PointElement} from 'chart.js';
import 'chartjs-chart-financial'

Chart.register(LineElement, PointElement, LineController, BarController, BarElement);

During the webpack build, I see these warnings:

WARNING in ./node_modules/chartjs-chart-financial/src/controller.candlestick.js 47:3-27
export 'default' (imported as 'Chart') was not found in 'chart.js' (possible exports: Animation, Animations, ArcElement, BarController, BarElement, BasePlatform, BasicPlatform, BubbleController, CategoryScale, Chart, DatasetController, DomPlatform, DoughnutController, Element, Filler, Interaction, Legend, LineController, LineElement, LinearScale, LogarithmicScale, PieController, PointElement, PolarAreaController, RadarController, RadialLinearScale, Scale, ScatterController, Ticks, TimeScale, TimeSeriesScale, Title, Tooltip, _adapters, animator, defaults, layouts, plugins, registry)
 @ ./node_modules/chartjs-chart-financial/src/index.js 5:0-64 11:15-36

And if I try to run the code in the browser, I get these errors –

[Error] TypeError: undefined is not an object (evaluating 'chart_js__WEBPACK_IMPORTED_MODULE_0__.default.defaults')
	Eval Code (element.financial.js:10)
	eval
	./node_modules/chartjs-chart-financial/src/element.financial.js (index.js:453)
	__webpack_require__ (index.js:2421)
	Eval Code (element.candlestick.js:7:96)
	eval
	./node_modules/chartjs-chart-financial/src/element.candlestick.js (index.js:438)
	__webpack_require__ (index.js:2421)
	Eval Code (controller.candlestick.js:8:98)
	eval
	./node_modules/chartjs-chart-financial/src/controller.candlestick.js (index.js:393)
	__webpack_require__ (index.js:2421)
	Eval Code (index.js:3:104)
	eval
	./node_modules/chartjs-chart-financial/src/index.js (index.js:482)
	__webpack_require__ (index.js:2421)
	Eval Code (trades.js:17:101)
	eval
	./trading_suite/static/src/trades.js (index.js:2384)
	__webpack_require__ (index.js:2421)
	Eval Code (index.js:4:85)
	eval
	./trading_suite/static/src/index.js (index.js:2330)
	__webpack_require__ (index.js:2421)
	(anonymous function) (index.js:2483)
	Global Code (index.js:2485)

Any idea what could be going wrong here? I'm fairly new to npm and webpack so any advice is much appreciated here :)

[ConnorRigby]

Getting this same issue

[etimberg]

The issue is that this line is incorrect

It should be import { Chart } from 'chart.js';

[benmccann]

Thanks @etimberg! I just pushed a commit to make that change

I wasn't able to use the latest Chart.js beta because something caused the tooltips to act very strange when I did that

[benmccann]

Ok, I figured out the thing with beta.7. The options for the tooltips needed to be updated

[thezentrader]

@benmccann Thank you for looking at this!