# **Chart**

## 1. Common

### 1.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.
- 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-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.  
  ![Chart-bar-theme][chart-bar-01]
- 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/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

- 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

A chart that represents data in horizontal bar shapes. Can be displayed as parallel or stacked bars if there are multiple fields.

### 3.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.
- 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.

### 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

A chart that represents data in line shapes. (For overlapping properties, refer to bar charts)

### 4.1. 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.
- 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

- 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 represents data in radar shapes, displaying the data of a circular chart with multiple lines.

### 5.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.

### 5.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.  
    ![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

A chart that represents data in polar coordinate shapes.

### 6.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.

### 6.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' 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

A chart that represents data in circular shapes.

### 7.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.

### 7.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' 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. Doughnut Chart

![Component-Chart-doughnut][chart-doughnut-01]

A chart that represents data in doughnut shapes.

### 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

- 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