SBCHART

var chart =  sb.chart.render("#chartWrap", {
	global: {
		paint: {
			use: true,
			showControl: true,
			margin: {
				top: 10,
				bottom: 10
			},
			useBackground: false,
   			cursorImageData: 'AIYmEnGEGwslQQVLzwQkHxegNvYRgcyc7OwI+',
   			selectionBorderColor: '#00FFAB',
   			defaultText: '',
   			defaultColor1: 'gray',
   			defaultColor2: 'red',
   			defaultColor3: '#00FFAB',
   			defaultColor4: 'blue',
   			paintJsondata: {
	   			useBackground: true,
   				jsonData:  [
   				    {
   				        "id": "id-3",
   				        "type": "rect",
   				        "position": [
   				            {
   				                "x": 0.5,
   				                "y": 210
   				            },
   				            {
   				                "x": 1.5,
   				                "y": 150
   				            }
   				        ],
   				        "color": "silver",
   				        "linewidth": "1",
   				        "fillColor": "silver"
   				    },
   				    {
   				        "id": "id-4",
   				        "type": "rect",
   				        "position": [
   				            {
   				                "x": 3.3,
   				                "y": 210
   				            },
   				            {
   				                "x": 3.75,
   				                "y": 150
   				            }
   				        ],
   				        "color": "silver",
   				        "linewidth": "1",
   				        "fillColor": "silver"
   				    },
   				    {
   				        "id": "id-5",
   				        "type": "text",
   				        "position": [
   				            {
   				                "x": 2.25,
   				                "y": 315
   				            }
   				        ],
   				        "color": "red",
   				        "fontsize": "14",
   				        "fontweight": "bold",
   				        "text": "강의 넓이 (1.75Km)"
   				    },
   				],,
   				useEvent: true,
			}
		},
		svg: {
			className: 'sbchart'
		},
		export: {
			show: true
		},
		size: {
			width: 1000,
			height: 400
		},
		chartArea: {
			show: true,
		},
		onclick: (data) => console.log('선택된 셀의 데이터 ', data),
	},
	data: {
		type: 'area',
		columns: [  
        	["2015",90,40,50,120,80,90],
        	["2016",120,160,200,160,130,220],
        	["2017",300,240,290,230,300,320]
        ],
	},
	extend: {
		line: {
			hideCircle: true,
		},
		areaRange: {
			type: 'line',
			opacity: 0.4,
		},
		middleLine: {
			show: true,
			width:  2,
			color: '#50e67d',
		},
		minMax: {
			radius: 0
		}
	}
})