chart.js multi y axis

엑셀이나 오픈오피스(리브레오피스) calc 에서 그래프 그릴때 많이 사용하는 다축 그래프

 

생각외로 어렵진 않은데, 런타임중에(초기화 이후) 변경이 가능한진 모르겠다

const config = {   type: 'line',   data: data,   options: {     responsive: true,     interaction: {       mode: 'index',       intersect: false,     },     stacked: false,     plugins: {       title: {         display: true,         text: 'Chart.js Line Chart - Multi Axis'       }     },     scales: {       y: {         type: 'linear',         display: true,         position: 'left',       },       y1: {         type: 'linear',         display: true,         position: 'right',         // grid line settings         grid: {           drawOnChartArea: false, // only want the grid lines for one axis to show up         },       },     }   }, }; const DATA_COUNT = 7; const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100}; const labels = Utils.months({count: 7}); const data = {   labels: labels,   datasets: [     {       label: 'Dataset 1',       data: Utils.numbers(NUMBER_CFG),       borderColor: Utils.CHART_COLORS.red,       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),       yAxisID: 'y',     },     {       label: 'Dataset 2',       data: Utils.numbers(NUMBER_CFG),       borderColor: Utils.CHART_COLORS.blue,       backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),       yAxisID: 'y1',     }   ] };

[링크 : https://www.chartjs.org/docs/latest/samples/line/multi-axis.html]