Chart.js 배경구간 색 설정하기

y축 최소값 : 0.9 부터 y축 최대값:1.2까지의 구역에 회색 배경색을 설정하였다.

특정 x축을 설정하고 싶으면 xMin,xMax값을 넣으면 됨

 

1.참조하기(plugin)

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/2.2.1/chartjs-plugin-annotation.min.js" integrity="sha512-qF3T5CaMgSRNrxzu69V3ZrYGnrbRMIqrkE+OrE01DDsYDNo8R1VrtYL8pk+fqhKxUBXQ2z+yV/irk+AbbHtBAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

 

2.plugin적용(차트 초기 생성시)

            var ctx = document.getElementById('lineChart').getContext('2d');
            myChart = new Chart(ctx, {
                type: 'bar',
                data: Chartdata,
                options: plugins: {
                    annotation: {
                        annotations: {
                            box1: {
                                drawTime: 'beforeDraw',
                                type: 'box',
                                yMin: 0.9,//
                                yMax: 1.2,
                                backgroundColor: 'rgba(234, 234, 234, 0.9)'
                            }
                        }
                    }
                },
                plugins: ['chartjs-plugin-annotation']
            });