[Support] How to add volumes bar to financial charts

[GitCatacao]

Hi everyone.

I have worked with many libraries so far, but I did not know chart.js which is completely free and open source.

I got passionate about it and I really like it a lot, but I do not understand why you have not added the volumes in the financial example (which is very important for those working in the sector because they provide a lot of information about what is happening).

I have to say that since I have only been using it for a short time, I still do not have the basic knowledge to be able to use it correctly.

So I would be interested to know how to modify the example you provide for finacial charts to insert the volumes.

In the link below, the volumes have already been inserted in the series data and in the tooltip, but I do not know how to graphically insert the series of bars inside the chart.

https://jsfiddle.net/tfgu5j90/

Can someone help me and modify it?

Actually, I would also be interested in one or more moving average series. But one thing at a time.

Thanks.

[qr4d]

I would also want to know how to add volumes.

ps. I have functions to add moving averages bellow

function MAline(dailyKlineData,period) {
    const lineData = dailyKlineData.map((entry,i,data) => {
        let yData = null; // 初始化 yData 为 null
        if (i < period - 1) {
            yData=null; // 前 period-1 个数据点为 null
        } else {
            const sum = data.slice(i - period + 1, i + 1).reduce((acc, d) => acc + d.close, 0);            
            yData= sum / period;
        } 
        return {
            x: (new Date(entry.date)).valueOf(), // 日期
            y: yData // 收盘价
        }
    });
    return lineData;
}

datasets.push({
        label: 'MA18',
        type: 'line',
        data: MAline(dailyKlineData, 18),
        pointStyle:false,
        backgroundColor: 'rgb(219, 237, 18)',
        borderColor: 'rgb(219, 237, 18)',
        borderWidth: 1,
});

[qr4d]

try this https://jsfiddle.net/qinrui/2ugcLhk9/

[GitCatacao]

try this https://jsfiddle.net/qinrui/2ugcLhk9/

@qr4d TNX CAT-TIGER. GOOD JS FIDDLE. IT WORKS. U THE BEST ONE! 🐈 👋