Thanks for contributing.

• [X] Tick to sign-off your agreement to the Developer Certificate of Origin (DCO) 1.1

Description

Updated Chart.js peer dependency to the latest version, and fixed broken tests. Added ESM build to avoid warnings when using the plugin with Angular (https://github.com/valor-software/ng2-charts/pull/1276)

I know that this is not in the npm registry yet. Would you consider adding it as a -beta.x or with a @next tag? It would get more adoption while setting the expectation that it's not ready for prime time. This is a pattern that other libraries, such as vuefire with firestore support, has used.

I just want to try this out. Could you please provide a sample that works out of the box in the samples folder?

I am looking at index.html. Chart.bundle.js could perhaps be a cdn reference? Chart.Financial.js could be prebuilt and available?

Well done!

Hi, this is a wonderful plugins. I really loved using it, but i have some issues since i upgraded to 2.8.0chart.js

Sometimes the underlined error comes out, and the plotting stops or makes huge lags.

Do you know how i could fix this? I upgraded all the chart.js related scripts, but wont work out

chartjs-chart-financial.js:118 Uncaught TypeError: Cannot read property 'toFixed' of undefined
    at i.label (chartjs-chart-financial.js:118)
    at Chart.min.js:7
    at Object.each (Chart.min.js:7)
    at i.getBody (Chart.min.js:7)
    at i.update (Chart.min.js:7)
    at i.handleEvent (Chart.min.js:7)
    at ni.eventHandler (Chart.min.js:7)
    at i (Chart.min.js:7)
    at HTMLCanvasElement.Fe.(anonymous function) (https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js:7:77594)

Not been able to trace through to the root of the problem, I'm afraid - and my code isn't pretty enough to give you a 'steps to reproduce'. I see from the commit that the sample tests have been updated to use integers instead of date strings on the x-axis, could this be related? I have custom y-axis called 'price' instead of 'y', changing this to 'y' doesn't do much though.

have some sample data: "[{"t":"2020-06-18T00:00:00Z","o":0.9336,"h":0.93406,"l":0.93266,"c":0.93345,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T01:00:00Z","o":0.93345,"h":0.9344,"l":0.93015,"c":0.93158,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T02:00:00Z","o":0.93158,"h":0.93175,"l":0.93068,"c":0.93132,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T03:00:00Z","o":0.93132,"h":0.93251,"l":0.93098,"c":0.93213,"isTrendingUp":true,"prospects":[]},{"t":"2020-06-18T04:00:00Z","o":0.93213,"h":0.93301,"l":0.93127,"c":0.9326,"isTrendingUp":true,"prospects":[]},{"t":"2020-06-18T05:00:00Z","o":0.9326,"h":0.93337,"l":0.93165,"c":0.93195,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T06:00:00Z","o":0.93195,"h":0.93314,"l":0.93149,"c":0.93176,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T07:00:00Z","o":0.93176,"h":0.93197,"l":0.93046,"c":0.93152,"isTrendingUp":false,"prospects":[]},{"t":"2020-06-18T08:00:00Z","o":0.93152,"h":0.93368,"l":0.93093,"c":0.93292,"isTrendingUp":true,"prospects":[]}]"

nothing particularly funky with my dataset:

{ label: ['Candles'], borderColor: 'black', color: { up: 'white', down: 'black', unchanged: 'gray' }, data: candles, prospects: candles.map(c => c.prospects), order: 10, yAxisID: 'price', categoryPercentage: 1.0, barPercentage: 1.0 }

defaults are also pretty boring: financial: { scales: { x: { distribution: 'linear' } } },

In the meantime, I've forked & reverted back to the previous commit, which works perfectly for me. #mystery.

I gave the financial chart a first try today and I was surprised how well it already works! I hope this gets released soon so more people can use it :).

One issue I had: I tried to add volume bars by adding a bar chart to the financial chart. There were no errors, but the bar chart was not shown. Is this possible or would this have to be implemented in the financial chart directly? (reference how I wanted it to look: https://bittrex.com/Market/Index?MarketName=BTC-ETH)

Hi,

I am having some difficulty in getting x-axis Panning (from chartjs-plugin-zoom) to work with chartjs-chart-financial.

I am able to use the Zoom functionality fine and zooming in/out of the financial candlestick chart is working as expected.

After zooming into the financial chart, I can pan up/down on the y-axis perfectly fine to view the rest chart on the y-axis (which is off the screen due to just zooming in).

However, when I try to pan left/right on the chart after zooming in, it doesn't seem to work. The financial chart changes and snaps back and is no longer zoomed in on the x-axis. Suddenly, the chart is showing all of the x-axis data like it was before I zoomed into the chart... although keep in mind, the y-axis is still zoomed in/stretched.

Has anyone else tried getting panning (particularly x-axis panning) to work properly on zoomed ChartJS Financial candlestick Charts? I'm wondering whether this issue is known? Is it a bug or whether panning is just not supported on the financial charts?

I'm currently using:

• ChartJS v3.2.1
• chartjs-plugin-zoom v1.0.1
• chartjs-chart-financial v0.1.0

Please note: I have tested this with both 'candlestick' and normal 'line' charts. I am only facing these x-axis panning issues on 'candlestick' charts. For 'line' charts, I can zoom in and pan around the chart staying zoomed in on both axes, unlike 'candlestick' where the x-axis doesn't pan.

See below for my chart config:

    var ctx = document.getElementById('chart').getContext('2d');

    var myChart = new Chart(ctx, {
        type: 'candlestick',
        data: {
            datasets: [{
                label: 'Test label',
                data: priceData
            }]
        },
        options: {
            plugins: {
                zoom: {
                    pan: {
                        enabled: true,
                        mode: 'xy'
                    },
                    zoom: {
                        wheel: {
                            enabled: true,
                            modifierKey: 'ctrl'
                        },
                        pinch: {
                            enabled: true
                        },
                        mode: 'xy',
                    }
                }
            }
        }
    });

Description

When options.tooltips.position is set to 'average' or not specified, the tooltip won't appear. When options.tooltips.position is set to 'nearest', the tooltip will appear but not be centered on the candle.

This happens because the default Element.hasValue checks _model.x and _model.y, but elements.Financial doesn't have _model.y property. This PR adds hasValue method to elements.Financial, which checks _model.x, _model.candleOpen, _model.candleHigh, _model.candleLow and _model.candleClose.

Edit: For tooltipPosition, (vm.candleOpen + vm.candleClose) / 2 is used instead of (vm.candleHigh + vm.candleLow) / 2 so that the tooltip is centered on the fat part of the bar.

Testing

The screenshots below are examples with options.tooltips.position = 'nearest'

Master: https://jsfiddle.net/nagix/ub8m5tzk/

This PR: https://jsfiddle.net/nagix/dsx4vb6h/

On a candlestick chart, after hovering over a value, the borders disappear if the chart is configured to display a tooltip with the following parameters :

options: {
  tooltips: {
    position: 'nearest',
    mode: 'index',
  },
},

jsfiddle

Before hover

After

Hi,

I try to use mixed types: https://www.chartjs.org/docs/latest/charts/mixed.html

But the 'type' value is dominant at a higher level;

var chart = new Chart(ctx, {
        type: "candlestick",
        data: {
            datasets: [{
                type: "candlestick",
                label: marketName,
                data: candleData
            }, {
                type: "line",
                label: supportLevel,
                data: lineData
            }
        }
    }
);

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 :)

Hi there, I am using chartjs v3.6.0 and moment (with moment adapter) i faced an issue while i am trying to use this plugin. Here is the problem;

After some investigations i found the problem;

function computeMinSampleSize(scale, pixels) {
        let min = scale._length;
        let prev, curr, i, ilen;

        for (i = 1, ilen = pixels.length; i < ilen; ++i) {
            min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
        }

        for (i = 0, ilen = scale.ticks.length; i < ilen; ++i) {
            curr = scale.getPixelForTick(i);
            min = i > 0 ? Math.min(min, Math.abs(curr - prev)) : min; // here min value is becaming NaN because of curr and prev can be NaN
            prev = curr;
        }

        return min;
    }

My solution was (for very quick fix);

function computeMinSampleSize(scale, pixels) {
        let min = scale._length;
        let prev, curr, i, ilen;

        for (i = 1, ilen = pixels.length; i < ilen; ++i) {
            min = Math.min(min, Math.abs(pixels[i] - pixels[i - 1]));
        }

        for (i = 0, ilen = scale.ticks.length; i < ilen; ++i) {
            curr = scale.getPixelForTick(i);
            min = i > 0 && !isNaN(curr) && !isNaN(prev) ? Math.min(min, Math.abs(curr - prev)) : min; // add check for NaN values
            prev = curr;
        }

        return min;
    }

and the result is;

but as i see scale.getPixelForTick() always returns NaN and it can be because of wrong date parsing but anyway it should not cause wrong output.

This is all i found in couple of hours please add, share your thoughts and i hope it helps everyone who faced this issue! Thank you.

Here is the error:

Here is a simple coding example `

<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/2.4.0/luxon.min.js" integrity="sha512-v1zUTZ9zv9Wb2scL/ANxXM6m7yegm/W5SN8SRHNFADdZIuSFFkrEBjNxO803DdFkjoCcJ88g1WHRVlLN6K/O1A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script src="local.js"></script>

Hi there,

Any idea how would one use this module with react.js

I did

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js"

import { Chart } from "react-chartjs-2";

import "../public/static/chartjs-chart-financial";

But then I got stuck, not sure where to take it from here.

P.S I am trying to use candlestick chart

Thanks for contributing.

• [x] Tick to sign-off your agreement to the Developer Certificate of Origin (DCO) 1.1

Description

Changed existing code to support and test for NodeJS usability.

Testing

Added a unit test and update the script running infrastructure to support Windows.