chartjs/chartjs-chart-financial

Initiate chart without data

Benjythebee opened this issue · 2 comments

Hey, cheers for your work!

I am currently trying to create a candlestick chart that will be felling up over time. That is, when I initiate the graph, the x axis is already premade but with no y values.

I then later attempt to add values over time: after 5s add a bar to x=1 ...

This works perfectly when using a simple line chart.

However this is not working when using the candlestick type of chart.
I am getting the following error:
image

Which seems to be linked to this code:

afterBuildTicks: scale => {
                    const DateTime = window && window.luxon && window.luxon.DateTime;
                    if (!DateTime) {
                        return;
                    }
                    const majorUnit = scale._majorUnit;
                    const ticks = scale.ticks;
                    const firstTick = ticks[0];
    
                    let val = DateTime.fromMillis(ticks[0].value);     //-- Line 66
                    if ((majorUnit === 'minute' && val.second === 0)
                            || (majorUnit === 'hour' && val.minute === 0)
                            || (majorUnit === 'day' && val.hour === 9)
                            || (majorUnit === 'month' && val.day <= 3 && val.weekday === 1)
                            || (majorUnit === 'year' && val.month === 1)) {
                        firstTick.major = true;
                    } else {
                        firstTick.major = false;
                    }
                    let lastMajor = val.get(majorUnit);
    
                    for (let i = 1; i < ticks.length; i++) {
                        const tick = ticks[i];
                        val = DateTime.fromMillis(tick.value);
                        const currMajor = val.get(majorUnit);
                        tick.major = currMajor !== lastMajor;
                        lastMajor = currMajor;
                    }
                    scale.ticks = ticks;
                }

From what I understand, the code expects ticks right off the bat. So if there is no data by default then it will throw an error?

Am I missing something? if not It would be great to implement upgrade the code to let the chart initiate properly without data.

If I am simply dumb, I'd love an idea on how to achieve what I'm looking for that'd be amazing, cheers.

That's not a use case I've explicitly supported in the past. I'd be happy to accept a PR to address this

Yes that would be great, please someone Ping once that's planned!

In the meantime I've decided to send a dummy data point as shown below. When the very first candle is send to the graph it replaces that dummy bar.

var config = {
      type: 'candlestick',
      data: {
        datasets: [{
          label: 'Prices',
          backgroundColor:'rgba(13, 0, 104,0.8)',
          data: [{
            t: Date.now(),
            o: 0,
            h: 0,
            l: 0,
            c: 0,
            tt:0
        }
          ]
        }]
      },
...

Now the graph works but saddly the x axis isn't its full length from start. It starts from one tick and gradually becomes bigger. :(
image