var defaultStyles = {
	layout : {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingTop : 43,
		paddingBottom : 24,
		paddingLeft : 20,
		paddingRight : 30
	},
	graph : {
		paddingTop: 20,
		paddingBottom: 0,
		paddingLeft: 20,
		paddingRight: 20,
		area : {
			color: '#f8f8f8'
		},
		line: {
			top: { 
				color: '#ccc9c9', 
				width: 1, 
				opacity: 1 
			},
			left: { 
				color: '#ccc9c9', 
				width: 1, 
				opacity: 1 
			},
			right: { 
				color: '#ccc9c9', 
				width: 1, 
				opacity: 1 
			},
			bottom: { 
				color: '#ccc9c9', 
				width: 1, 
				opacity: 1 
			}
		}		            
	},
	yAxis: {
		width: 44, 
		position: 'left',
		paddingLeft: 0, 
		paddingRight: 11,
		line: {
			color: '#cccccc', 
			width: 1, 
			opacity: 1,			
			underLine : {
				use : false,
				color: '#3e4150', 
				width: 1, 
				opacity: 1
			}
		},
		text: {
			family: 'Nanum Gothic', 
			size: 12, 
			color: '#666666', 
			align: 'right',		/* left | center | right */
			style: 'normal', 	/* normal | italic */
			weight: 'bold',	/* normal | bold */
			opacity: 1
		},
		tick: {
			use : false,
			length: 5, 
			color: '#807f7f',
			width: 1, 
			opacity: 1,
			position: 'out'	/* out|in */
		}
	},
	xAxis: {
		height: 10, 
		paddingTop: 10, 
		line: { 
			color: '#e3e3e3', 
			width: 1, 
			opacity: 1,			
			underLine : {
				use : false,
				color: '#3e4150', 
				width: 1, 
				opacity: 1
			}
		},
		text: {
			family: 'Nanum Gothic',
			size: 12, 
			color: '#666666', 
			align: 'center',	/* left | center | right */
			style: 'normal',	/* normal | italic */
			weight: 'bold',	/* normal | bold */
			opacity: 1
		}
	},
	trendLine : {
		use : true,
		color : '#556673',
		width : 1,
		opacity : 1,
		animate : {
			use : true,
			color : '#ca873f'
		}
	},
	series : {
		line: {
			color: '#fff', 
			width: 0
		},
		area : {
			type : 'normal',	/* normal | upDown */
			color : [
				'#ff625f', '#ff852c', '#ffbb16', '#d6de1d', '#2bcdba',
				'#34b8ef', '#5e93f4', '#838bf0', '#cc8af2', '#ff8bcd'
			],		            	
			opacity: 1,
			size : {
				max : 25,
				min : 1
			}
		},
		hover : {
			use : true,
			area : {
				color : '#18918d'
			},
			line : {
				color : '#fff',
				width : 0
			}
		}
	},
	animate : {
		use : true,
		type : 'bounce', /* linear|>|<|<>|bounce|elastic|backln|backOut */
		speed : 600				     	
	},
	drag : { /* 모바일에서는 드래그 기능을 지원하지 않습니다. */
		use : false,
		down : {
			animate : {
				use : false,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				opacity : 0.5,
				speed : 100
			}
		},
		up :{
			animate : {
				use : false,
				type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
				speed : 200
			}
		}
	},
	enlarge : {
		use : false,
		animate : {
			use : false,
			type : 'linear', /* linear|>|<|<>|bounce|elastic|backln|backOut */
			speed : 400	
		}
	}
};	

Configuration Styles

layout

SVG 전체 영역 스타일

Parameters

Usage

var styles = {
	layout: {
		area : {
			color : '#f8f8f8'
		},
		line : {
			color : '#eaeaea',
			width : 1
		},
		paddingTop : 30,
		paddingBottom : 30,
		paddingLeft : 30,
		paddingRight : 30
	}
}

var styles = {
	graph: {
		paddingTop : 10,
		paddingBottom : 10,
		paddingLeft : 10,
		paddingRight : 10
	}
}

var styles = {
	graph: {
		area: {
			color : '#fff'
		}
	}
}

var styles = {
	graph: {
		line: {
			top : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1
			},
			bottom : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			},
			left : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			},
			right : {
				color : '#ccc9c9',
				width : 1,
				opacity : 1

			}
		}
	}
}

var styles = {
	yAxis: {
		width : 60
	}
}

var styles = {
	yAxis: {
		position: 'left'
	}
}

var styles = {
	yAxis: {
		paddingLeft: 0,
		paddingRight: 20
	}
}

var styles = {
	yAxis: {
		line : {
			color: '#bab9ba',            
			width: 1,
            opacity: 1,
            underLine : {
                use : true,
                color: '#3e4150',
                width: 1,
                opacity: 1
            }
		}
	}
}

var styles = {
	yAxis: {
		text : {
			family : 'dotum',
			size : 11, 
			color : '#000',
			align : 'center',		/* [ left or center or right ] */
			style : 'normal',		/* [ normal or italic ] */
			weight : 'normal',		/* [ normal or bold ] */
			opacity : 1
		}
	}
}

var styles = {
	yAxis: {
		tick: {
			use : false,
			length : 5, 
			color : '#000',
			width : 1,
			opacity : 1,
			position : 'out'	[ 'in' or 'out' ]
		}
	}
}

var styles = {
	xAxis: {
		height : 10
	}
}

var styles = {
	xAxis: {
		paddingTop: 20
	}
}

var styles = {
	xAxis: {
		line : {
			color: '#bab9ba',            
			width: 1,
            opacity: 1,
            underLine : {
                use : true,
                color: '#3e4150',
                width: 1,
                opacity: 1
            }
		}
	}
}

var styles = {
	yAxis: {
		text : {
			family : 'dotum',
			size : 11, 
			color : '#000',
			align : 'center',		/* [ left or center or right ] */
			style : 'normal',		/* [ normal or italic ] */
			weight : 'normal',		/* [ normal or bold ] */
			opacity : 1
		}
	}
}

var styles = {
	trendLine: {
		use : true,
		color : '#ff0000',
		width : 1,
		opacity : 1,
		animate : {
			use : true,
			color : '#ffff00'
		}
	}
}

var styles = {
	series: {
		line : {
			color : '#ff0000',
			width : 1
		}
	}
}

var styles = {
	series : {
		area : {
			type : 'normal',
			color : [
				'#eb2207', '#ebad07', '#ebe807', '#98eb07', '#2deb07', 
                '#07eba3', '#07e3eb', '#0768eb', '#3807eb', '#bd07eb'
			},
			opacity : 1,
			size : {
				max : 25,
				min : 1
			}
		},
		hover : {
			use : true,
			area : {
				color : '#ff0000',
			},
			line : {
				color : '#fff',
				width : 1
			}
		}
	}
}

var styles = {
	series : {
		area : {
			type : 'upDown',
			up : {
				color : '#ff0000',
				opacity : 1
			},
			down : {
				color : '#fff000',
				opacity : 1
			},
			size : {
				max : 200,
				min : 10
			}    
		},
		hover : {
			use : true,
			area : {
				up : {
					color : '#ca2a27'
				},
				down : {
					color : '#005fa8'
				}
			}
		}
	}
}

var styles = {
	animate: {
		use : true,				/* 애니메이션 사용 여부 */
		type : 'elastic',		/* 애니메이션 type */
		speed : 600
	}
}

var styles = {
	drag: {
		use : true,				/* 애니메이션 사용 여부 */
		down : {
			animate : {
				use : true,
				type : 'linear',
				opacity : 0.5,
				speed : 100
			}
		},
		up: {
			animate : {
				use : true,
				type : 'linear',
				opacity : 0.5,
				speed : 100
			}
		}
	}
}

var styles = {
	enlarge: {
		use : true,				/* unlarge 이벤트 사용 여부 */
		animate : {
			use : true,			/* animate 사용 여부 */
			type : 'bounce',	/* 애니메이션 type */
			speed : 600			/* 애니메이션 speed */
		}
	}
}