[chart.js] Config example

Config Options

myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            ....
        },

        options: {
       	        // 여기에 들어갈 옵션들
            },
        }
});

Responsive Charts

Name	Type	Default	Description
responsive	boolean	true	값이 true이면 chart의 canvas size를 resizing할 수있다.
`	number	0	Duration in milliseconds it takes to animate to new size after a resize event.
maintainAspectRatio	boolean	true	Maintain the original canvas aspect ratio (width / height) when resizing.
aspectRatio	number	2	Canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas). Note that this option is ignored if the height is explicitly defined either as attribute or via the style.
onResize	function	null	Called when a resize occurs. Gets passed two arguments: the chart instance and the new size.

responsive: true

responsive: false

 

demo ↓

https://codepen.io/chartjs/pen/YVWZbz

 

Doughnut & Pie

Name	Type	Default	Description
cutoutPercentage	number	50 - for doughnut, 0 - for pie	차트 가운데를 자르는 비율. (0이면 pie에 가깝고 50이면 도넛에 가까움.)
rotation	number	-0.5 * Math.PI	chart의 시작점
circumference	number	2 * Math.PI	Sweep to allow arcs to cover.
animation.animateRotate	boolean	true	true이면 chart가 회전하면서 display됨.
animation.animateScale	boolean	false	true이면 chart 크기가 커지면서 display됨.

 

 

 

 

 

1. cutoutPercentage 

options: {
	cutoutPercentage: 60,
}

 

cutoutPercentage : 0 (파이모양)

cutoutPercentage : 60 (도넛모양)

 

2. rotation

options: {
	rotation: 50,
}

rotation: default (-0.5 * Math.path)

rotation : 50

3. circumference

options: {
	circumference: 6,
}

circumference : default (2 * Math.PI)

circumference : 6 

4. animation.animateRotate & animation.animateRotate

options: {
    animation: {
        animateScale: true,
      	animateRotate: true
    }
}

 

 

 

 

Reference : https://www.chartjs.org/docs/latest/