Move y-Axis and hide in Chart.JS V3

Question

So I've created this chart, and I'm trying to move the axis around so the Dark red is on the left, and the Blue and the sub of the bar charts is displayed, but I'm having trouble moving the dark red to the right side of this graf. I did try to use the position: 'right' , but nothing changed.

I'm trying to make it look like this:

But I can only get this:

 var canvas = document.createElement('canvas'); div = document.getElementById('container'); canvas.id = "myChart"; canvas.style.zIndex = 8; div.appendChild(canvas); const labels = [ '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7' ]; const data = { labels: labels, datasets: [{ label: 'Red', backgroundColor: 'rgb(255,0,0)', borderColor: 'rgb(255,0,0)', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Yellow', backgroundColor: 'rgb(255,255,0)', borderColor: 'rgb(255,255,0)', data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Orange', backgroundColor: 'rgb(255,159,64)', borderColor: 'rgb(255,159,64)', data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Grey light', backgroundColor: 'rgb(224,224,224)', borderColor: 'rgb(224,224,224)', data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Blue', backgroundColor: 'rgb(30,144,255)', borderColor: 'rgb(30,144,255)', data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328], stack: 'combined_first', yAxisID: 'GreyDaBlue', order: 1 }, { label: 'Dark Red', backgroundColor: 'rgb(165,42,42)', borderColor: 'rgb(165,42,42)', data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45], stack: 'combined_second', yAxisID: 'DarkR', order: 2 }, { label: 'Dark Grey', backgroundColor: 'rgb(80,80,80)', borderColor: 'rgb(80,80,80)', data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], stack: 'combined_third', yAxisID: 'GreyDaBlue', order: 3 } ] }; const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'WDC History Chart' }, zoom: { zoom: { wheel: { enabled: true, }, pinch: { enabled: true }, drag: { enabled: true }, mode: 'x', } } }, scales: { y: { stacked: true } } }, }; const myChart = new Chart( document.getElementById('myChart'), config );

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="container" class="wdc-canvas-size"> </div>

So how do I move the Dark Red y-axis over to the right side?

Answer 1

I could use the DarkR id and position it right in scales like this

 var canvas = document.createElement('canvas'); div = document.getElementById('container'); canvas.id = "myChart"; canvas.style.zIndex = 8; div.appendChild(canvas); const labels = [ '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '35', '36', '37', '38', '39', '40', '41', '42', '43', '44', '45', '46', '47', '48', '49', '50', '51', '52', '1', '2', '3', '4', '5', '6', '7' ]; const data = { labels: labels, datasets: [{ label: 'Red', backgroundColor: 'rgb(255,0,0)', borderColor: 'rgb(255,0,0)', data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Yellow', backgroundColor: 'rgb(255,255,0)', borderColor: 'rgb(255,255,0)', data: [0, 2, 2, 0, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], stack: 'combined', type: 'bar', order: 4 }, { label: 'Orange', backgroundColor: 'rgb(255,159,64)', borderColor: 'rgb(255,159,64)', data: [9, 21, 21, 0, 21, 21, 21, 21, 18, 18, 18, 18, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Grey light', backgroundColor: 'rgb(224,224,224)', borderColor: 'rgb(224,224,224)', data: [9, 20, 20, 0, 20, 20, 21, 21, 19, 19, 19, 19, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9], stack: 'combined', type: 'bar', order: 4 }, { label: 'Blue', backgroundColor: 'rgb(30,144,255)', borderColor: 'rgb(30,144,255)', data: [328, 421, 421, 0, 421, 421, 422, 422, 344, 344, 344, 344, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328, 328], stack: 'combined_first', yAxisID: 'GreyDaBlue', order: 1 }, { label: 'Dark Red', backgroundColor: 'rgb(165,42,42)', borderColor: 'rgb(165,42,42)', data: [0.45, 1.55, 1.55, 0, 1.55, 1.55, 1.55, 1.55, 1.15, 1.15, 1.15, 1.15, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.7, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45, 0.45], stack: 'combined_second', yAxisID: 'DarkR', order: 2 }, { label: 'Dark Grey', backgroundColor: 'rgb(80,80,80)', borderColor: 'rgb(80,80,80)', data: [18, 43, 43, 0, 43, 43, 44, 44, 38, 38, 38, 38, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 19, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18, 18], stack: 'combined_third', yAxisID: 'GreyDaBlue', order: 3 } ] }; const config = { type: 'line', data: data, options: { plugins: { title: { display: true, text: 'WDC History Chart' }, zoom: { zoom: { wheel: { enabled: true, }, pinch: { enabled: true }, drag: { enabled: true }, mode: 'x', } } }, scales: { y: { stacked: true }, DarkR: { position: 'right', // `axis` is determined by the position as `'y'` } } }, }; const myChart = new Chart( document.getElementById('myChart'), config );

 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <div id="container" class="wdc-canvas-size"> </div>