@operato/scene-chartjs 0.0.5

package/helps/scene/component/chartjs.ko.md

@@ -0,0 +1,332 @@
+# **Chart**
+
+## 1. 공통
+
+### 1.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+* 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
+
+### 1.2. X축
+
+* 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.  
+  ![Chart-bar-테마][chart-bar-01]
+* 제목 - X축에 원하는 제목(라벨) 입력
+* 그리드 라인 - 세로방향의 눈금선 표현 여부
+  ![X축 그리드][chart-bar-08]
+* 눈금 표시 - X축 눈금 표시 여부
+
+### 1.3. Y축
+
+* 제목 - Y축에 원하는 제목(라벨) 입력
+* 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
+* 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
+* 스텝 - 눈금 간격 설정
+* 그리드 라인 - 가로방향의 눈금선 표현 여부
+  ![Y축 그리드][chart-bar-12]
+* 눈금 표시 - Y축 눈금 표시 여부
+
+---
+
+## 2. Mix Chart(수직 막대/라인 차트)
+* 데이터를 막대모양과 라인모양의 형태를 섞어서 표현해주는 차트. __(믹스차트의 속성은 막대차트와 라인차트와 동일합니다.)__
+* 데이터를 막대모양 또는 라인모양의 형태로 표현하거나 막대와 라인을 믹스해서 표현 가능. 여러개의 시리즈(필드)가 있을시엔 병렬막대 또는 누적막대로 표현이 가능
+  ![chart-mix-차트 타입][chart-mix-02]
+
+  [chart-mix-02]: ../images/chart-mix-02.png
+### 2.1. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 
+    아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
+    ![Data Refer][chart-bar-01]
+  * 유형 - 해당 시리즈를 라인(line)차트로 표현할지 아니면 바차(bar)트로 표현할지
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
+    ![누적 그룹][chart-bar-02]
+  * 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다. 
+    ![대상 축][chart-bar-03]
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
+    값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+    
+* **유형이 line인 경우**
+  * 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
+  * 경계부분 넓이 - 라인의 굵기 설정
+  * 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
+  * 포인트 크기 - 라인의 각 꼭지점의 크기
+  * 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.
+
+### 2.2. X축
+
+* 알반 - [공통 속성](#1.2.-X축)에서 정의한 내용과 같음
+* 막대 간격 - 막대와 막대 사이의 간격이며 막대의 크기에 영향 준다.
+* 눈금 간격 - 눈금 사이의 간격이며 막대의 크기에 영향 준다.
+
+### 2.3. Y축
+
+* [공통 속성](#1.3.-Y축)에서 정의한 내용과 같음
+
+### 2.4. Y보조축(2축 선택 시 표현 됨)
+
+* 설정 속성은 Y축 설정 방법과 같다.
+
+
+[chart-bar-01]: ../images/chart-bar-01.png
+
+[chart-bar-02]: ../images/chart-bar-02.png
+
+[chart-bar-03]: ../images/chart-bar-03.png
+
+[chart-bar-08]: ../images/chart-bar-08.png
+
+[chart-bar-12]: ../images/chart-bar-12.png
+
+
+---
+
+## 3. 수평 막대 차트
+
+데이터를 가로 막대모양의 형태로 표현해주는 차트. 여러개의 필드가 있을시엔 병렬막대 또는 누적막대로 표현이 가능
+
+### 3.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+* 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
+  
+
+### 3.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
+  * 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다. 
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다.
+  값표시가 선택되면 아래와 같은 항목이 나타난다.
+  * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+  * 크기 - 시리즈 내 폰트 크기 설정 
+  * 위치 - 시리즈 내 폰트위치 설정
+
+### 3.3. X축
+
+* 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.  
+* 제목 - X축에 원하는 제목(라벨) 입력
+* 그리드 라인 - 세로방향의 눈금선 표현 여부
+* 눈금 표시 - X축 눈금 표시 여부
+
+### 3.4. Y축
+
+* 제목 - Y축에 원하는 제목(라벨) 입력
+* 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
+* 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
+* 스텝 - 눈금 간격 설정
+* 그리드 라인 - 가로방향의 눈금선 표현 여부
+* 눈금 표시 - Y축 눈금 표시 여부
+
+
+[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
+
+---
+## 4. 라인 차트
+
+데이터를 라인모양의 형태로 표현해주는 차트. (중복되는 속성은 막대차트를 참조)
+
+### 4.1. 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+* 2축 - Y축을 좌우 2축으로 표현 여부, 2축 선택 시 Y보조축 및 Y보조축 옵션이 표현된다.
+
+### 4.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
+  ![Data Refer][chart-line-01]
+  * 긴장도 - 직선을 사용한 그래프(angled), 부드러운 선을 사용한 그래프(smooth)
+  * 경계부분 넓이 - 라인의 굵기 설정
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 포인트 모양 - 라인의 각 꼭지점의 포인트 모양
+  * 포인트 크기 - 라인의 각 꼭지점의 크기
+  * 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
+  * 채우기 - 라인이 그려진 공간을 공통 속정의 색상을 이용하여 데이터를 표시하는 도형을 채운다.
+  * 대상 축 - 2축 적용 시 대상축에 대한 설정 필드가 나타나는데, 대상축은 해당 시리즈의 정보가 참조하는 축(축의 눈금)을 가르킨다. 
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다. 값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+
+### 4.3. X축
+
+* 데이터 참조 - 차트가 표현할 데이터의 필드명. X축에 표현될 데이터의 필드명을 입력한다. 아래와 같은 데이터를 표시할 시 'Date'가 된다.  
+* 제목 - X축에 원하는 제목(라벨) 입력
+* 그리드 라인 - 세로방향의 눈금선 표현 여부
+* 눈금 표시 - X축 눈금 표시 여부
+
+### 4.4. Y축
+* 제목 - Y축에 원하는 제목(라벨) 입력
+* 최소값 자동 - 최소값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최소값 - 최소값 자동 해제 시 표시가 되며 눈금 최소값을 설정할 수 있다.
+* 최대값 자동 - 최대값 자동 선택 시 자동으로 최개값과 스텝을 적용하여 눈금 계산
+* 최대값 - 최대값 자동 해제 시 표시가 되며 눈금 최대값을 설정할 수 있다.
+* 스텝 - 눈금 간격 설정
+* 그리드 라인 - 가로방향의 눈금선 표현 여부
+* 눈금 표시 - Y축 눈금 표시 여부
+
+[chart-line-01]: ../images/chart-line-01.png
+
+---
+## 5. 레이더 차트
+
+데이터를 레이더 모양으로 표현해주는 차트. 원형 차트의 데이터를 여러개의 라인 형태로 표현
+### 5.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+
+### 5.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'과 'Bad'가 된다.  
+  ![Data Refer][chart-radar-01]
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 누적 그룹 - 동일한 누적 그룹에 포함되어 있는 시리즈들의 값을 누적하여 그라프에 표현한다.
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다. 값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+
+### 5.3. 축
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
+  ![Data Refer][chart-radar-01]
+
+[chart-radar-01]: ../images/chart-radar-01.png
+
+---
+
+## 6. 폴라 차트
+
+데이터를 극좌표 모양으로 표현해주는 차트.
+
+### 6.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+
+### 6.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
+  ![Data Refer][chart-polar-01]
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다. 값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+
+### 6.3. 축
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 hobby가 된다.
+  ![Data Refer][chart-polar-01]
+
+
+[chart-polar-01]: ../images/chart-polar-01.png
+
+---
+
+## 7. 파이 차트
+
+데이터를 원형 모양으로 표현해주는 차트.
+
+### 7.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+
+### 7.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
+  ![Data Refer][chart-pie-01]
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다. 값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+
+### 7.3. 축
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
+  ![Data Refer][chart-pie-01]
+
+[chart-pie-01]: ../images/chart-pie-01.png
+
+---
+
+## 8. 도넛 차트
+![컴포넌트-Chart-doughnut][chart-doughnut-01]
+
+데이터를 도넛 모양으로 표현해주는 차트.
+
+### 8.1. 공통 속성
+
+* 테마 - 차트의 테마를 변경. 'light'와 'dark' 두가지를 지원
+* 범례 - 차트의 범례를 표시. 
+* 위치 - 상(top), 하(buttom), 좌(left), 우(right) 네방향으로 배치할 수 있다.
+
+### 8.2. 시리즈
+
+* 버튼 "+"를 사용하여 데이터의 시리즈를 여러개 추가할 수 있다.
+* **공통**
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 Series의 Data-Key는 'Good'가 된다.  
+  ![Data Refer][chart-doughnut-01]
+  * 라벨 - 범례명
+  * 색상 - 차트에 표현될 시리즈의 색상 지정
+  * 접두사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접두사로 적용할 문자(예: data: 100, 접두사: $ => 결과: $100 )
+  * 접미사 - 값 표시가 될 때(마우스 오버, 값표시 등) 값의 접미사로 적용할 문자(예: data: 100, 접미사: 원 => 결과: 100원 ) 
+  * 값표시 - 해당 시리즈의 데이터를 화면에 표현여부를 결정한다. 값표시가 선택되면 아래와 같은 항목이 나타난다.
+    * 폰트 색상 - 시리즈 중 표시된 값의 색상 설정
+    * 크기 - 시리즈 내 폰트 크기 설정 
+    * 위치 - 시리즈 내 폰트위치 설정
+
+### 8.3. 축
+  * 데이터 참조 - 시리즈별로 참조하는 원본 데이터에서 Y축에 표현될 데이터의 필드명를 정의, 아래와 같은 데이터를 표시할 시 참조할 데이터는 line이 된다.
+  ![Data Refer][chart-doughnut-01]
+
+[chart-doughnut-01]: ../images/chart-doughnut-01.png

package/helps/scene/component/chartjs.md

@@ -0,0 +1,333 @@
+# **Chart**
+
+## 1. Common
+
+### 1.1. Common Properties
+
+* Theme - Change the theme of the chart. Supports'light' and'dark'
+* Legend - Display the legend of the chart.
+* Position - Can be placed in four directions: top, bottom, left, and right.
+* Multi Axis - Whether to express the Y axis as left and right Multi Axis, and when selecting Multi Axis, the Y 2nd axes and Y 2nd axes options are displayed.
+
+### 1.2. X Axes
+
+* Data key - Field name of the data to be represented on the chart. Enter the field name of the data to be expressed in X Axes. When the following data is displayed, it becomes'Date'.
+  ![Chart-bar-theme][chart-bar-01]
+* Title - Enter the desired label in X Axes
+* Grid Line - Whether grid lines representing the vertical direction
+  ![X Axes Grid][chart-bar-08]
+* Display Tick - Whether X Axes Display Tick or not
+
+### 1.3. Y Axes
+
+* Title - Enter the desired title (Label) in Y Axes
+* Min Auto - When Min Auto is selected, the minimum value and step are automatically applied to calculate the scale
+* Min - Displayed when Min Auto is off, and scale Min can be set.
+* Max Auto - When Max Auto is selected, the maximum value and step are automatically applied and the scale is calculated.
+* Max - Displayed when Max Auto is off, and the scale Max can be set.
+* Step - Set the scale interval
+* Grid Line - Whether to express horizontal grid lines
+  ![Y Axes Grid][chart-bar-12]
+* Display Tick - Whether Y Axes Display Tick or not
+
+---
+
+## 2. Mix Chart(Vertical bar chart & line chart)
+* Chart that expresses data by mixing bar shape and line shape. __(The properties of the mix chart are the same as the bar chart and line chart.)__
+* Data can be expressed in the form of bars or lines, or by mixing bars and lines. When there are multiple series (fields), it can be expressed as a parallel bar or stacked bar.
+  ![chart-mix-chart Type][chart-mix-02]
+
+  [chart-mix-02]: ../images/chart-mix-02.png
+
+### 2.1. Series
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key - Defines the field name of the data to be expressed in Y Axes from the original data referenced by series,
+    When displaying the following data, the Data Key of the Series is 'Good' and'Bad'.
+    ![Data Refer][chart-bar-01]
+  * Type - Whether to express the series in a line chart or bar
+  * Label - Legend name
+  * Color - Specify the color of the series to be displayed on the chart
+  * Stack Group - The values ​​of the series included in the same Stack Group are accumulated and expressed in a graph.
+    ![Stack Group][chart-bar-02]
+  * Target Axes - When multi axis is applied, the setting field for the target Axes appears, and the target Axes points to the Axes (Axes scale) referenced by the information of the series.
+    ![Target Axes][chart-bar-03]
+  * Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Suffix: circle => Result: 100 won)
+  * Display Value - Determines whether to display the data of the series on the screen.
+    When Display Value is selected, the following items appear.
+    * Font Color - Set the color of the displayed value in the series
+    * Size - Set Font Size in Series
+    * Position - Set Font Position in Series
+* **When Type is line**
+  * Line Tension - Graph using straight line (angled), graph using smooth line (smooth)
+  * Border Width - Set the width of the line
+  * Point Shape - Point shape of each vertex of the line
+  * Point Size - Size of each vertex of the line
+  * Fill - The space where the line is drawn is filled in the figure that displays the data by using the color of the common inner definition.
+
+### 2.2. X Axes
+
+* Same as the content defined in [Common Properties](#1.2.-X Axes)
+* Bar Spacing - Gap between bars, and it affects the size of the bar.
+* Tick Spacing - Gap between the tick marks and affects the size of the bar.
+
+### 2.3. Y Axes
+
+* Same as the content defined in [Common Properties](#1.3.-Y Axes)
+
+### 2.4. Y 2nd Axes(Display on Multi axis is selected)
+
+* Same as the content defined in [Common Properties](#1.3.-Y Axes)
+
+
+[chart-bar-01]: ../images/chart-bar-01.png
+
+[chart-bar-02]: ../images/chart-bar-02.png
+
+[chart-bar-03]: ../images/chart-bar-03.png
+
+[chart-bar-08]: ../images/chart-bar-08.png
+
+[chart-bar-12]: ../images/chart-bar-12.png
+
+
+---
+
+## 3. Horizontal bar chart
+
+A chart that expresses data in the form of a horizontal bar. When there are multiple fields, it can be expressed as a parallel bar or stacked bar.
+
+### 3.1. 공통 속성
+  
+* Theme - Change the theme of the chart. Supports'light' and'dark'
+* Legend - Display the legend of the chart.
+* Position - Can be placed in four directions: top, bottom, left, and right.
+* Multi Axis - Whether to express the Y axis as left and right Multi Axis, and when selecting Multi Axis, the Y 2nd axes and Y 2nd axes options are displayed.
+
+### 3.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key - Defines the field name of the data to be expressed in Y Axes from the original data referenced by series,
+    When displaying the following data, the Data Key of the Series is 'Good' and'Bad'.
+    ![Data Refer][chart-bar-01]
+  * Label - Legend name
+  * Color - Specify the color of the series to be displayed on the chart
+  * Stack Group - The values ​​of the series included in the same Stack Group are accumulated and expressed in a graph.
+    ![Stack Group][chart-bar-02]
+  * Target Axes - When multi axis is applied, the setting field for the target Axes appears, and the target Axes points to the Axes (Axes scale) referenced by the information of the series.
+    ![Target Axes][chart-bar-03]
+  * Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value setted, etc.) (Ex: data: 100, Value Suffix: circle => Result: 100 won)
+  * Display Value - Determines whether to display the data of the series on the screen.When Display Value is selected, the following items appear.
+    * Font Color - Set the color of the displayed value in the series
+    * Size - Set Font Size in Series
+    * Position - Set Font Position in Series
+
+### 3.3. X Axes
+
+* Data Key - The field name of the data to be expressed by the chart. Enter the field name of the data to be expressed in X Axes. When the following data is displayed, it becomes'Date'.
+  ![Data Refer][chart-horizontal-bar-01]
+* Title - Enter the desired title (Label) in X Axes
+* Grid Line - Whether to display vertical grid lines
+* Display Tick - Whether X Axes Display Tick or not
+
+### 3.4. Y Axes
+
+* Title - Enter the desired title (Label) in Y Axes
+* Min Auto - When Min Auto is selected, the minimum value and step are automatically applied to calculate the scale
+* Min - Displayed when Min Auto is off, and scale Min can be set.
+* Max Auto - When Max Auto is selected, the maximum value and step are automatically applied and the scale is calculated.
+* Max - Displayed when Max Auto is off, and the scale Max can be set.
+* Step - Set the scale interval
+* Grid Line - Whether to express horizontal grid lines
+* Display Tick - Whether Y Axes Display Tick or not
+
+
+[chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
+
+---
+## 4. Line Chart
+
+Chart that expresses data in the form of a line. 
+
+### 4.1. Properties
+
+* Theme-Change the theme of the chart. Supports'light' and'dark'
+* Legend-Display the legend of the chart.
+* Position-It can be placed in four directions: top, bottom, left, and right.
+* Multi axis-Whether to express Y Axes as left and right Multi axis, when selecting Multi axis, Y 2nd Axes and Y 2nd Axes options are displayed.
+
+### 4.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key - Defines the field name of the data to be expressed in Y Axes in the original data referenced by series, and when the following data is displayed, the Data-Key of the series becomes'Good' or 'Bad'.
+  ![Data Refer][chart-line-01]
+  * Line Tension - Graph using straight line (angled), graph using smooth line (smooth)
+  * Border Width - Set the width of the line
+  * Label - Legend name
+  * Color - Specify the color of the series to be displayed on the chart
+  * Point Shape - Point shape of each vertex of the line
+  * Point Size - Size of each vertex of the line
+  * Stack Group - The values ​​of the series included in the same Stack Group are accumulated and expressed in a graph.
+  * Fill - The space where the line is drawn is filled in the figure that displays the data by using the color of the common inner definition.
+  * Target Axes - When multi axis is applied, the setting field for the target Axes appears, and the target Axes points to the Axes (Axes scale) referenced by the information of the series.
+  * Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse - over, Display Value, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse - over, Display Value, etc.) (Ex: data: 100, Value Prefix: circle => Result: 100 won)
+  * Display Value - Determines whether to display the data of the series on the screen. When Display Value is selected, the following items appear.
+    * Font Color - Set the color of the displayed value in the series
+    * Size - Set Font Size in Series
+    * Position - Set FontPosition in Series
+
+### 4.3. X Axes
+
+* Data Key-The field name of the data to be expressed by the chart. Enter the field name of the data to be expressed in X Axes. When the following data is displayed, it becomes'Date'.
+* Title-Enter the desired title (Label) in X Axes
+* Grid Line-Whether to display vertical grid lines
+* Display Tick-Whether X Axes Display Tick or not
+
+### 4.4. Y Axes
+* Title - Enter the desired title (Label) in Y Axes
+* Min Auto - When Min Auto is selected, the minimum value and step are automatically applied to calculate the scale
+* Min - Displayed when Min Auto is off, and scale Min can be set.
+* Max Auto - When Max Auto is selected, the maximum value and step are automatically applied and the scale is calculated.
+* Max - Displayed when Max Auto is off, and the scale Max can be set.
+* Step - Set the scale interval
+* Grid Line - Whether to express horizontal grid lines
+* Display Tick - Whether Y Axes Display Tick or not
+
+
+[chart-line-01]: ../images/chart-line-01.png
+
+---
+## 5. Radar chart
+
+A chart that expresses data in the form of a radar. Pie chart data is expressed in the form of multiple lines
+### 5.1. Common attribute
+
+* Theme - Change the theme of the chart. Supports'light' and'dark'
+* Legend - Display the legend of the chart.
+* Position - It can be placed in four directions: top, bottom, left, and right.
+
+### 5.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key - Defines the field name of the data to be expressed in Y Axes in the original data referenced by series, and when the following data is displayed, the Data-Key of the series becomes'Good' and'Bad'.
+  ![Data Refer][chart-radar-01]
+  * Label - Legend name
+  * Color - Specify the color of the series to be displayed on the chart
+  * Stack Group - The values ​​of the series included in the same Stack Group are accumulated and expressed in a graph.
+  * Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value, etc.) (Ex: data: 100, Value Prefix: circle => Result: 100 won)
+  * Display Value - Determines whether to display the data of the series on the screen. When Display Value is selected, the following items appear.
+    * Font Color - Set the color of the displayed value in the series
+    * Size - Set Font Size in Series
+    * Position - Set FontPosition in Series
+
+### 5.3. Axes
+  * Data Key - Defines the field name of the data to be expressed in Axes in the original data referenced by series. When displaying the following data, the referenced data becomes a line.
+  ![Data Refer][chart-radar-01]
+
+[chart-radar-01]: ../images/chart-radar-01.png
+
+---
+
+## 6. Polar chart
+
+Charts that represent data in polar coordinates.
+
+### 6.1. Common attribute
+
+* Theme - Change the theme of the chart. Supports'light' and'dark'
+* Legend - Display the legend of the chart.
+* Position - It can be placed in four directions: top, bottom, left, and right.
+
+### 6.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key - Defines the field name of the data to be expressed in Y Axes in the original data referenced by series, and when the following data is displayed, the Data-Key of the series becomes 'Good'.
+  ![Data Refer][chart-polar-01]
+  * Label - Legend name
+  * Color - Specify the color of the series to be displayed on the chart
+  * Value Prefix - The character to be applied as the Value Prefix of the value when the value is displayed (mouse hover, Display Value, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix - The character to be applied as the Value Suffix of the value when the value is displayed (mouse hover, Display Value, etc.) (Ex: data: 100, Value Prefix: circle => Result: 100 won)
+  * Display Value - Determines whether to display the data of the series on the screen. When Display Value is selected, the following items appear.
+    * Font Color - Set the color of the displayed value in the series
+    * Size - Set Font Size in Series
+    * Position - Set FontPosition in Series
+
+### 6.3. Axes
+  * Data Key - Defines the field name of the data to be expressed in Axes in the original data referenced by series. When displaying the following data, the referenced data becomes line.
+  ![Data Refer][chart-polar-01]
+
+[chart-polar-01]: ../images/chart-polar-01.png
+
+---
+
+## 7. Pie chart
+
+Charts that represent data in a circular shape.
+
+### 7.1. Common attribute
+
+* Theme-Change the theme of the chart. Supports'light' and'dark'
+* Legend-Display the legend of the chart.
+* Position-It can be placed in four directions: top, bottom, left, and right.
+
+### 7.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key-Defines the field name of the data to be expressed in Y Axes in the original data referenced by series, and when the following data is displayed, the Data-Key of the series becomes 'Good'.
+  ![Data Refer][chart-pie-01]
+  * Label-Legend name
+  * Color-Specify the color of the series to be displayed on the chart
+  * Value Prefix-The character to be applied as the Value Prefix of the value when the value is displayed (mouse-over, Display Value, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix-The character to be applied as the Value Suffix of the value when the value is displayed (mouse-over, Display Value, etc.) (Ex: data: 100, Value Prefix: circle => Result: 100 won)
+  * Display Value-Determines whether to display the data of the series on the screen. When Display Value is selected, the following items appear.
+    * Font Color-Set the color of the displayed value in the series
+    * Size-Set Font Size in Series
+    * Position-Set FontPosition in Series
+
+### 7.3. Axes
+  * Data Key-Defines the field name of the data to be expressed in Axes in the original data referenced by series. When displaying the following data, the referenced data becomes a line.
+  ![Data Refer][chart-pie-01]
+
+[chart-pie-01]: ../images/chart-pie-01.png
+
+---
+
+## 8. Donut chart
+
+A chart that presents data in a donut shape.
+
+### 8.1. Common attribute
+
+* Theme-Change the theme of the chart. Supports'light' and'dark'
+* Legend-Display the legend of the chart.
+* Position-It can be placed in four directions: top, bottom, left, and right.
+
+### 8.2. Series
+
+* Multiple series of data can be added by using the button "+".
+* **common**
+  * Data Key-Defines the field name of the data to be expressed in Axes in the original data referenced by series, and when the following data is displayed, the Data-Key of the series becomes 'Good'.
+  ![Data Refer][chart-doughnut-01]
+  * Label-Legend name
+  * Color-Specify the color of the series to be displayed on the chart
+  * Value Prefix-The character to be applied as the Value Prefix of the value when the value is displayed (mouse-over, Display Value, etc.) (Ex: data: 100, Value Prefix: $ => Result: $100)
+  * Value Suffix-The character to be applied as the Value Suffix of the value when the value is displayed (mouse-over, Display Value, etc.) (Ex: data: 100, Value Prefix: circle => Result: 100 won)
+  * Display Value-Determines whether to display the data of the series on the screen. When Display Value is selected, the following items appear.
+    * Font Color-Set the color of the displayed value in the series
+    * Size-Set Font Size in Series
+    * Position-Set FontPosition in Series
+
+### 8.3. Axes
+  * Data Key-Defines the field name of the data to be expressed in Axes in the original data referenced by series. When displaying the following data, the referenced data becomes a line.
+  ![Data Refer][chart-doughnut-01]
+
+[chart-doughnut-01]: ../images/chart-doughnut-01.png