@operato/scene-chartjs 7.0.8 → 7.0.10

package/helps/scene/component/chartjs.md

@@ -4,330 +4,357 @@
 
 ### 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.
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, right.
+- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its options are displayed.
 
-### 1.2. X Axes
+### 1.2. X-axis
 
-* 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'.
+- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.  
   ![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
+- Title - Enter the desired title (label) for the X-axis
+- Grid Line - Option to display vertical grid lines
+  ![X-axis Grid][chart-bar-08]
+- Tick Marks - Option to display tick marks on the X-axis
+
+### 1.3. Y-axis
+
+- Title - Enter the desired title (label) for the Y-axis
+- Auto Min Value - Automatically select the minimum value and step for tick calculations
+- Min Value - Set the minimum tick value when auto is disabled.
+- Auto Max Value - Automatically select the maximum value and step for tick calculations
+- Max Value - Set the maximum tick value when auto is disabled.
+- Step - Set the tick interval
+- Grid Line - Option to display horizontal grid lines
+  ![Y-axis Grid][chart-bar-12]
+- Tick Marks - Option to display tick marks on the Y-axis
 
 ---
 
-## 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]
+## 2. Mix Chart (Vertical Bar/Line Chart)
+
+- A chart that mixes data representations in bar and line shapes. **(Mix chart properties are the same as bar and line charts.)**
+- Can represent data as bars, lines, or a mix of both. If there are multiple series (fields), it can be displayed as parallel or stacked bars.
+  ![chart-mix-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)
 
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.  
+    ![Data Refer][chart-bar-01]
+  - Type - Define whether the series is represented as a line or bar chart.
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
+    ![Accumulation Group][chart-bar-02]
+  - Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
+    ![Target Axis][chart-bar-03]
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+- **For line type**
+  - Tension - Use straight (angled) or smooth lines
+  - Border Width - Set the line thickness
+  - Point Shape - Define the shape of the points at each vertex of the line
+  - Point Size - Define the size of the points at each vertex of the line
+  - Fill - Fill the space under the line with the common property color
+
+### 2.2. X-axis
+
+- General - Same as defined in [Common Properties](#1.2.-X-axis)
+- Bar Gap - Gap between bars, affects bar size
+- Tick Gap - Gap between ticks, affects bar size
+
+### 2.3. Y-axis
+
+- Same as defined in [Common Properties](#1.3.-Y-axis)
+
+### 2.4. Secondary Y-axis (Displayed when dual-axis is selected)
+
+- Settings are the same as Y-axis settings.
 
 [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
+## 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.
+A chart that represents data in horizontal bar shapes. Can be displayed as parallel or stacked bars if there are multiple fields.
 
-### 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.1. Common Properties
 
-### 3.2. Series
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, right.
+- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its options are displayed.
 
-* 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
+### 3.2. Series
 
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
+  - Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+
+### 3.3. X-axis
+
+- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.
+- Title - Enter the desired title (label) for the X-axis
+- Grid Line - Option to display vertical grid lines
+- Tick Marks - Option to display tick marks on the X-axis
+
+### 3.4. Y-axis
+
+- Title - Enter the desired title (label) for the Y-axis
+- Auto Min Value - Automatically select the minimum value and step for tick calculations
+- Min Value - Set the minimum tick value when auto is disabled.
+- Auto Max Value - Automatically select the maximum value and step for tick calculations
+- Max Value - Set the maximum tick value when auto is disabled.
+- Step - Set the tick interval
+- Grid Line - Option to display horizontal grid lines
+- Tick Marks - Option to display tick marks on the Y-axis
 
 [chart-horizontal-bar-01]: ../images/chart-horizontal-bar-01.png
 
 ---
+
 ## 4. Line Chart
 
-Chart that expresses data in the form of a line. 
+A chart that represents data in line shapes. (For overlapping properties, refer to bar charts)
 
 ### 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.
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, right.
+- Dual-axis - Option to express the Y-axis as two axes (left and right). When selected, the secondary Y-axis and its 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
-
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.  
+    ![Data Refer][chart-line-01]
+  - Tension - Use straight (angled) or smooth lines
+  - Border Width - Set the line thickness
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Point Shape - Define the shape of the points at each vertex of the line
+  - Point Size - Define the size of the points at each vertex of the line
+  - Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
+  - Fill - Fill the space under the line with the common property color
+  - Target Axis - If dual-axis is applied, the target axis setting field appears, indicating the axis (axis ticks) the series references.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character
+
+to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+
+- Value Display - Decide whether to display the series data on the screen.
+  When value display is selected, the following items appear.
+  - Font Color - Set the series label color
+  - Size - Set the series label font size
+  - Position - Set the series label position
+  - Offset - Set the relative position of the series label
+  - Rotation - Set the rotation angle of the series label
+
+### 4.3. X-axis
+
+- Data Reference - Field name of the data to be represented on the chart. Enter the field name to be displayed on the X-axis. For example, 'Date' for the data below.
+- Title - Enter the desired title (label) for the X-axis
+- Grid Line - Option to display vertical grid lines
+- Tick Marks - Option to display tick marks on the X-axis
+
+### 4.4. Y-axis
+
+- Title - Enter the desired title (label) for the Y-axis
+- Auto Min Value - Automatically select the minimum value and step for tick calculations
+- Min Value - Set the minimum tick value when auto is disabled.
+- Auto Max Value - Automatically select the maximum value and step for tick calculations
+- Max Value - Set the maximum tick value when auto is disabled.
+- Step - Set the tick interval
+- Grid Line - Option to display horizontal grid lines
+- Tick Marks - Option to display tick marks on the Y-axis
 
 [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
+## 5. Radar Chart
+
+A chart that represents data in radar shapes, displaying the data of a circular chart with multiple lines.
+
+### 5.1. Common 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.
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, 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.
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' and 'Bad' for the data below.  
+    ![Data Refer][chart-radar-01]
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Accumulation Group - Accumulate the values of series included in the same group and display them in the graph.
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+
+### 5.3. Axis
+
+- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
   ![Data Refer][chart-radar-01]
 
 [chart-radar-01]: ../images/chart-radar-01.png
 
 ---
 
-## 6. Polar chart
+## 6. Polar Chart
 
-Charts that represent data in polar coordinates.
+A chart that represents data in polar coordinate shapes.
 
-### 6.1. Common attribute
+### 6.1. Common 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.
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, 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.
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.  
+    ![Data Refer][chart-polar-01]
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+
+### 6.3. Axis
+
+- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'hobby' for the data below.
   ![Data Refer][chart-polar-01]
 
 [chart-polar-01]: ../images/chart-polar-01.png
 
 ---
 
-## 7. Pie chart
+## 7. Pie Chart
 
-Charts that represent data in a circular shape.
+A chart that represents data in circular shapes.
 
-### 7.1. Common attribute
+### 7.1. Common 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.
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, 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.
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.  
+    ![Data Refer][chart-pie-01]
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+
+### 7.3. Axis
+
+- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
   ![Data Refer][chart-pie-01]
 
 [chart-pie-01]: ../images/chart-pie-01.png
 
 ---
 
-## 8. Donut chart
+## 8. Doughnut Chart
 
-A chart that presents data in a donut shape.
+![Component-Chart-doughnut][chart-doughnut-01]
 
-### 8.1. Common attribute
+A chart that represents data in doughnut shapes.
 
-* 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.1. Common Properties
+
+- Theme - Change the chart's theme. Supports 'light' and 'dark'
+- Legend - Display the chart's legend.
+- Position - Can be positioned in four directions: top, bottom, left, 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.
+- Use the "+" button to add multiple series to the data.
+- **Common**
+  - Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'Good' for the data below.  
+    ![Data Refer][chart-doughnut-01]
+  - Label - Legend name
+  - Color - Define the color of the series on the chart
+  - Value Format - You can specify the numeric format of the value when it is displayed.
+  - Prefix - Character to be applied as a prefix when displaying values (e.g., data: 100, prefix: $ => result: $100)
+  - Suffix - Character to be applied as a suffix when displaying values (e.g., data: 100, suffix: 원 => result: 100원)
+  - Value Display - Decide whether to display the series data on the screen.
+    When value display is selected, the following items appear.
+    - Font Color - Set the series label color
+    - Size - Set the series label font size
+    - Position - Set the series label position
+    - Offset - Set the relative position of the series label
+    - Rotation - Set the rotation angle of the series label
+
+### 8.3. Axis
+
+- Data Reference - Define the field name for the data to be represented on the Y-axis for each series. For example, 'line' for the data below.
   ![Data Refer][chart-doughnut-01]
 
 [chart-doughnut-01]: ../images/chart-doughnut-01.png