Estoy trabajando en el proyecto ASP.NET (.NET Framework 4.0) y uso Chart.js (versión 3.5.0) para crear gráficos a partir de datos. En este gráfico, el eje x es el mes del año y el eje y es para el valor de los datos. Debido a que hay 2 series con diferentes unidades de valor, quiero que la serie esté en un panel diferente, como se muestra en la imagen a continuación:

En la imagen, ambas series comparten el mismo eje x pero se colocan en un panel diferente (cada panel también tiene un eje y diferente).

Por lo que he intentado, podría hacer que el gráfico tenga varios ejes Y en el lado diferente como este:

Pero según el requisito, el gráfico no debe superponerse entre sí y ser como en la primera imagen, por lo que me pregunto si es posible separarlo en un panel diferente.

Aquí está mi código

 var chart; function DrawChart() { if (chart) chart.destroy(); var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; var data = { datasets: [{ label: 'Volume (Cubic Metre)', data: [2900, 2105, 1950, 2030, 2105, 1950, 1040, 1600, 2300, 3000, 2020, 1700, 2100, 2000, 2800], pointRadius: 0, pointStyle: 'line', borderColor: '#F37B2D', backgroundColor: '#F37B2D', yAxisID: 'y1' }, { label: 'Price ($)', data: [350, 320, 380, 350, 315, 355, 190, 200, 240, 350, 270, 300, 250, 280, 320], pointRadius: 0, pointStyle: 'rect', borderColor: '#4473C5', backgroundColor: '#4473C5', fill: true, yAxisID: 'y' }, ], labels: labels, }; var config = { type: 'line', data: data, options: { maintainAspectRatio: false, scales: { x: { ticks: { minRotation: 90, maxRotation: 90 } }, y: { position: 'left', beginAtZero: true, title: { display: true, text: '$' } }, y1: { position: 'right', beginAtZero: true, title: { display: true, text: 'Cubic Metre' }, grid: { drawOnChartArea: false } } }, plugins: { legend: { position: 'bottom', reverse: true, labels: { usePointStyle: true, padding: 25, } } } } }; var ctx = document.getElementById('chart'); chart = new Chart(ctx, config); } $(function() { DrawChart(); });