[Chartjs]-How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?

It seems you need to scale the volume data since it’s two different value units in Y,

It seems like currentlty there isn’t support for this in chartJs I created a feature request, follow the link to see the two issues that were closed due to this.

https://github.com/apexcharts/apexcharts.js/issues/2068

With default configuration you’re not easily able to add barcharts.
Here is steps you need to do;

Base config:

    const config = {
            // type: 'candlestick', // you must remove this, this option is braking the chart
            data: {
                datasets: []
            },
            options: {
                parsing: false, // must be here, solves another stupid problem
                spanGaps: true, // for better performance
                animation: false, // for better performance
                pointRadius: 0, // for better performance
                plugins: {
                    title: {
                        display: false,
                        text: 'Fiyat Grafiği'
                    },
                },
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'timeseries',
                    },
                    y: {
                        type: 'linear',
                    },
                    volume: {
                        type: 'linear',
                        beginAtZero: true,
                        position: 'right',
                        max: maxVolume * 10, // maxVolume should be the maximum number of volumes
                        grid: {
                            display: false, // for better presentation
                        },
                        ticks: {
                            display: false, // for better presentation
                        },
                    }
                },
                interaction: {
                    intersect: false,
                    mode: 'index',
                },
            }
        };

Second step is preparing the datasets;

    let dataSets = [
                {
                    type: 'candlestick', // this must stay
                    label: 'Financial Graph',
                    data: data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']),
                            'o': kline['open_price'],
                            'c': kline['close_price'],
                            'h': kline['high_price'],
                            'l': kline['low_price']
                        };
                    }),
                    color: {
                        up: 'rgb(26, 152, 129)', // those colors are better than defaults
                        down: 'rgb(239, 57, 74)', // those colors are better than defaults
                        unchanged: '#999', // those colors are better than defaults
                    },
                    borderColor: {
                        up: 'rgb(26, 152, 129)',
                        down: 'rgb(239, 57, 74)',
                        unchanged: '#999',
                    },
                    order: 10,
                    yAxisID: 'y', // this must stay
                },
                {
                    type: 'bar',
                    label: 'Volume',
                    data: data['klines'].map(function (kline) {
                        return {
                            'x': moment(kline['from']), // i used moment, feel free to use your own time library
                            'y': kline.quote_asset_volume,
                        }
                    }),
                    backgroundColor: data['klines'].map(function (kline) {
                        return kline.open_price < kline.close_price ? 'rgb(26, 152, 129)' : 'rgb(239, 57, 74)' // for better presentation
                    }),
                    borderColor: '#fff',
                    borderWidth: 1,
                    order: 12,
                    yAxisID: 'volume', // this must stay
                    barPercentage: 0.5, // this must stay
                    barThickness: 6, // this must stay
                    maxBarThickness: 8, // this must stay
                },
            ]

Result;