Chart.js графики

Подскажите, можно ли как-нибудь сделать, чтобы 2 графика находились друг под другом, то есть под каждой свечой был элемент графика. Ширина у них одинаковая

<div class="graphic">
    <canvas id="cryptoChart"></canvas>
    <div class="volume">
        <canvas id="volumeChart" style="position:absolute; left:0px;pointer-events:none; height: 100px;" ></canvas>
    </div>
    <canvas id="highlightCanvas" style="position:absolute; top:100; left:30px; pointer-events:none; height: 100%;"></canvas>
</div>

const chartConfig = {
    type: chartType, 
    data: {
        labels: [], 
        datasets: [
            {
                data: [],
                backgroundColor: 'rgba(75, 192, 192, 0.5)',
                borderColor: 'rgba(75, 192, 192, 1)',
                borderWidth: 1,
                fill: true,
                color: {
                    up: '#249D92',
                    down: '#C95454',
                    unchanged: '#999999'
                },
                barThickness: 'flex',
                backgroundColors: {
                    up: 'rgba(69, 183, 52, 0.8)',
                    down: 'rgba(255,62,31, 1)',
                    unchanged: 'rgba(201, 203, 207, 1)',
                },
                borderColors: {
                    up: 'rgb(75, 192, 192)',
                    down: 'rgb(255, 99, 132)',
                    unchanged: 'rgb(201, 203, 207)',
                }
            },
        ],
    },
    options: {
        animation: {
            duration: 100,
        },
        transitions: 'hide',
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'minute',
                    tooltipFormat: 'll',
                },
                ticks: {
                    color: 'white',
                    maxRotation: 0,
                    minRotation: 0,
                },
                grid: {
                    display: true,
                    color: 'rgba(255, 255, 255, 0.05)',
                    lineWidth: 1,
                }
            },
            y: {
                beginAtZero: false,
                position: 'right',
                ticks: {
                    color: 'white',
                },
                grid: {
                    display: true,
                    color: 'rgba(255, 255, 255, 0.05)',
                    lineWidth: 1,
                }
            },
        },
        plugins: {
            crosshair: false,
            annotation: {
                annotations: {
                    horizontalLine: {
                        type: 'line',
                        drawTime: 'afterDatasetsDraw',
                        borderColor: 'rgba(75, 192, 192, 0.8)',
                        borderWidth: 2,
                        borderDash: [5, 5],
                        label: {
                            enabled: true,
                            content: 'Price',
                            position: 'start',
                            backgroundColor: 'rgba(75, 192, 192, 0.8)',
                            color: '#fff',
                            font: {
                                size: 12
                            }
                        }
                    },
                    verticalLine: {
                        type: 'line',
                        drawTime: 'afterDatasetsDraw',
                        borderColor: 'rgba(75, 192, 192, 0.8)',
                        borderWidth: 2,
                        borderDash: [5, 5],
                    }
                }
            },
            legend: {
                display: false
            },
            zoom: {
                pan: {
                    enabled: false,
                },
                zoom: {
                    wheel: {
                        enabled: false,
                    },
                    drag: {
                        enabled: false,
                    },
                    pinch: {
                        enabled: false,
                    },
                    mode: 'x',
                },
                zoomLevel: 0
            }
        },
        elements: {
            candlestick: {
                barPercentage: 1.0,
                categoryPercentage: 0.5,
                barThickness: 0.1,
                borderColor: 'rgba(0, 0, 0, 1)',
                borderWidth: 1,
                borderRadius: 5,
            },
            point: {
                radius: 0,
                hitRadius: 5,
                hoverRadius: 5,
            },
            bar: {
                borderWidth: 1,
                borderRadius: 4,
                borderSkipped: false,
            }
        },
        onHover: (event, chartElement) => {
            const chart = event.chart;
        
            const xValue = chart.scales.x.getValueForPixel(event.x);
            const yValue = chart.scales.y.getValueForPixel(event.y);
        
            const xMinLimit = chart.scales.x.min;
            const xMaxLimit = chart.scales.x.max;
            const yMinLimit = chart.scales.y.min;
            const yMaxLimit = chart.scales.y.max;
        
            const boundedXValue = Math.max(Math.min(xValue, xMaxLimit), xMinLimit);
            const boundedYValue = Math.max(Math.min(yValue, yMaxLimit), yMinLimit);
        
            chart.options.plugins.annotation.annotations.horizontalLine.yMin = boundedYValue;
            chart.options.plugins.annotation.annotations.horizontalLine.yMax = boundedYValue;
        
            chart.options.plugins.annotation.annotations.verticalLine.xMin = boundedXValue;
            chart.options.plugins.annotation.annotations.verticalLine.xMax = boundedXValue;
        
            chart.update();
        }
    }
};

const volumeChartConfig = {
    type: 'bar',
    data: {
        labels: [],
        datasets: [{
            label: 'Volume',
            data: [],  // Данные по объемам
            backgroundColor: 'rgba(69, 183, 52, 0.8)',
            borderColor: 'rgba(69, 183, 52, 1)',
            borderWidth: 1,
            barThickness: 'flex',
            backgroundColor: 'rgba(36, 78, 117, 1)',
            borderRadius: 2
        }],
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'minute'
                },
                grid: {
                    display: false
                },
                ticks: {
                    display: false
                }
            },
            y: {
                beginAtZero: true,
            }
        },
        plugins: {
            legend: {
                display: false 
            }
        }
    }
};