chartjs/chartjs-chart-financial

latest commit ef246ede4d20a has broken me

CupcakeThief opened this issue · 10 comments

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.

One additional point of interest - I have multiple series on my chart, which are a mix of scatter and line, with one candlestick.
Latest version gives me a blank canvas (no errors in the console).

  1. Removing just the candlestick series, I still get a blank canvas
  2. If i also change the default chart type from candlestick to line, my data comes back
  3. If I add the candlestick series back in, and leave default type as line, then I'm back to a blank canvas

You should specify t as a timestamp. You can probably make it work as before by specifying the parsing: true option if you don't mind giving up some performance

Setting parsing: true didn't work.
Changing t to use timestamps did.
There's probably a better way, but fwiw:

t: moment(c.DateFrom).unix()*1000

Alas, I spoke too soon.
It seems there is further collateral, probably related to the line series with gaps that I draw.
Have run out of time for tinkering today, but here's the comment from my pet tester:
The legend is the only bit that looks right on this chart...It appears to be a large penis.

image

Here's the same graph, using the older plugin:
image

I think you can call .valueOf() instead of .unix()*1000. Side note, I highly recommend against using Moment because it's a huge file for the user to download to the browser. date-fns is much smaller alternative for simple stuff and Luxon is a much more feature complete alternative by one of the authors of Moment which supports timezones and i18n.

While the picture is very amusing 😄 , there's not enough information to be able to tell what's wrong. Is this something you could put in a site like Plnkr to share with me?

Thanks for that. The issue is that you're not using t and timestamps everywhere. Some places you are using x and some places you have strings as values

Thanks - I have a few other tickets to look at, will post an updated plunkr once I get back round to this