var defaultStyles = {
	layout: { // SVG 전체에 대한 스타일
		paddingTop: 10, 	// 상단 padding
		paddingRight: 10,  	// 우측 padding
		paddingBottom: 10, 	// 하단 padding
		paddingLeft: 10,	// 좌측 padding
		color: '#fff',		// SVG 배경 색상
		line: {	color: '', width: 0  } // SVG 테두리 색상과 두께
	},
	graph: { // 차트시리즈가 그려지는 배경 스타일
		color: '#fff', 		// 차트시리즈가 그려지는 배경 색상
		paddingTop: 0, 		// 상단 padding
		paddingRight: 10, 	// 우측 padding
		paddingBottom: 0, 	// 하단 padding
		paddingLeft: 10,	// 좌측 padding
		line: { // 차트시리즈가 그려지는 배경의 테두리
			top: { color: '#ddd', width: 1, opacity: 1 }, // 테두리 중 상단 색상, 두께, 투명도(0~1)
			left: { color: '#ddd', width: 1, opacity: 1 },	// 테두리 중 우측 색상, 두께, 투명도(0~1)
			right: { color: '#ddd', width: 1, opacity: 1 }, // 테두리 중 하단 색상, 두께, 투명도(0~1)
			bottom: { color: '#ddd', width: 1, opacity: 1 } // 테두리 중 좌측 색상, 두께, 투명도(0~1)
		}
	},
	yAxis: { // Y축 스타일
		width: 60, // label width
		position: 'left', // Y축 위치(left || right)
		paddgLeft: 10, // label의 좌측 padding
		paddingRight: 10, // label의 우측 padding
		baseAtZero: false,	// true이면 Y축은 0부터 시작
		maxNumber: null, // Y축의 최대값 고정
		minNumber: null, // Y축의 최소값 고정
		fit: false, // Y축 값의 소수점 포함 여부
		useValue: { // 맨 저값과 고값의 텍스트 출력 여부
			min: false, 
			max: false
		},
		text: { // Y축 텍스트 스타일
			family: 'dotum', 	// 글꼴 종류
			size: 11, 		 	// 글꼴 크기
			color: '#aaa', 		// 글꼴 색상
			align: 'left', 		// 텍스트 정렬(left || right || center)
			style: 'normal', 	// 글꼴 모양( bold || Italic )
			opacity: 1			// 글꼴 투명도
		},
		line: { // Y축 GRID LINE 스타일
			color: '#eee', 	// 선 색상
			width: 1, 		// 선 두께(0 ~)
			opacity: 1		// 선 투명도(0~1)
		}
	},
	xAxis: { // X축 스타일
		height: 20, // label height
		paddingTop: 10, // label의 상단 padding
		betweenLabels: false, // 텍스트와 텍스트 사이에 GridLine을 위치시키고 싶을 경우 true
		gap: 10, // 텍스트와 텍스트 사이의 간격
		baseAtStart: false,	// 시리즈가 그려지는 영역에 여백없이 그려지고 싶을 때 true
		useValue: {  // 맨 마지막 텍스트 출력 여부
			last: false 
		},
		text: { // X축 텍스트 스타일
			family: 'dotum', 	// 글꼴 종류
			size: 11, 			// 글꼴 크기
			color: '#aaa', 		// 글꼴 색상
			align: 'center', 	// 텍스트 정렬(left || right || center)
			style: 'normal', 	// 글꼴 모양(normal || bold || Italic )
			opacity: 1			// 글꼴 투명도
		},
		line: { // X축 GRID LINE 스타일
			color: '#eee', 	// 선 색상
			width: 1, 		// 선 두께(0 ~)
			opacity: 1		// 선 투명도(0~1)
		}
	},
	crossLine: { // 마우스를 따라다니는 선 스타일
		color: '#999', 	// 선 색상
		width: 1, 		// 선 두께
		opacity: 1, 	// 선 투명도
		style: ' ' 		// 선 모양 ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]
	},
	tip: { // 툴팁 스타일
		className: null,	// 툴팁에 매칭시킬 class명이 있는 경우 입력
		// className이 없을 경우 하단의 스타일이 적용 됨.
		color: '#fff', 		// 툴팁 배경
		paddingTop: 5, 		// 상단 padding
		paddingBottom: 5, 	// 하단 padding
		paddingLeft: 5, 	// 좌측 padding
		paddingRight: 5,	// 우측 padding
		line: {				// 툴팁 테두리 색상, 두께, 선 종류(solid, dotted...css의 border 속성)
			color: '#000', width: 1, style: 'solid'
		},
		text: {				// 툴팁 글꼴 색상, 종류, 모양(normal || bold || Italic), 크기
			color: '#000', family: 'dotum', style: 'normal',  size: 12
		}
	}
};

layout

SVG 전체 영역 스타일

layout.paddingTop = 10;

SVG 전체 영역의 상단 여백

Parameters

layout.paddingRight = 10;

SVG 전체 영역의 우측 여백

Parameters

layout.paddingBottom = 10;

SVG 전체 영역의 하단 여백

Parameters

layout.paddingLeft = 10;

SVG 전체 영역의 좌측 여백

Parameters

layout.color = '#ffffff';

SVG 전체 영역의 배경 색상

Parameters

layout.opacity = 1;

SVG 전체 영역의 배경 투명도

Parameters

layout.line.color = '';

SVG 전체 영역의 테두리 색상 (default는 표현되지 않게 '' 처리)

Parameters

layout.line.width = 0;

SVG 전체 영역의 테두리 두께 (default는 표현되지 않게 0 처리)

Parameters

Usage

var styles = {
	layout: {
		paddingTop: 10,
		paddingRight: 10,
		paddingBottom: 10,
		paddingLeft: 10,
		color: 'white',
		line: {
			color: '#afafaf',
			widht: '1'
		}
	},
	series: {
		s1: {}
	}
}

var styles = {
	graph: {
		paddingTop: 0,
		paddingRight: 10,
		paddingBottom: 0,
		paddingLeft: 10,
		color: 'white',
		line: {
			top: {color: '#ddd', width: 1, opacity: 1},
			left: {color: '#ddd', width: 1, opacity: 1},
			right: {color: '#ddd', width: 1, opacity: 1},
			bottom: {color: '#ddd', width: 1, opacity: 1}
		}
	},
	series: {
		s1: {}
	}
}

var styles = {
	yAxis: {
		width: 60,
		position: 'left',
		paddingRight: 10,
		paddingLeft: 10,
		baseAtZero: false,
		useValue: { min: false, min: false },
		text: {
			family: 'dotum',
			size: 11,
			color: '#aaa',
			align: 'left',
			style: 'normal',
			opacity: 1
		},
		line: {
			color: '#eee', width: 1, opacity: 1
		}
	},
	series: {
		s1: {}
	}
}

var styles = {
	xAxis: {
		height: 20,
		betweenLabels: false,
		gap: 10,
		paddingTop: 10,
		baseAtStart: false,
		useValue: { last: false },
		text: {
			family: 'dotum',
			size: 11,
			color: '#aaa',
			align: 'left',
			style: 'normal',
			opacity: 1
		},
		line: {
			color: '#eee', width: 1, opacity: 1
		}
	},
	series: {
		s1: {}
	}
}

var styles = {
	crossLine: {
		color: '#999',
		width: 1,
		opacity: 1,
		style: '-.'
	},
	series: {
		s1: {}
	}
}

선 종류(solid, dotted...css의 border-style 속성)

var styles = {
	tip: {
		className: null,
		color: '#fff',
		paddingTop: 5,
		paddingBottom: 5,
		paddingLeft: 5,
		paddingRight: 5,
		line: {
			color: '#000',
			width: 1,
			style: 'solid'
		},
		text: {
			color: '#000',
			family: 'dotum',
			style: 'normal',
			size: 12
		}
	},
	series: {
		s1: {}
	}
}