chartjs-chart-financial
chartjs-chart-financial copied to clipboard
Initiate chart without data
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:
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. :(