GRAPH allows you to visually represent data or relationships between different data points through line, bar, and doughnut charts. With the graph component in Editor, you can make data more understandable and engaging for the target audiences.

The component is available on demand. Contact the administrator for details.

To add this component to your item, drag GRAPH from the Components tab on the elements panel to the item layout.

General properties

To customize the graph component, select it on the layout and go to its Properties tab.

Here, you can configure the graph component in the following way:

View and change the component name. It appears on the Tree tab of the elements panel in Editor.
Select the chart type: Line, Bar, or Doughnut.
Enter the required font name in the FONT FAMILY text area. The selected font is applied to the text elements of the component.

We recommend using the default font predefined by the item brand theme to avoid unexpected issues with text styles after applying the formatting.

Add the chart title.
Select the font weight for the required text element in the graph component: Normal or Bold.
Set the font size for the required text element in the graph component.
Set the required element color with a color picker. You can specify its opacity in the respective input field. To remove the color, click.
With the button, add as many datasets as needed.

In the DATA section, you can use the following controls to manage the datasets and items:

Control	Action
	Unfold the dataset or item to customize its values
	Duplicate the required dataset or line and bar chart item with its properties. The duplicated dataset or item is added after the original one
	Delete the existing dataset or item. In the doughnut chart, you can delete items remaining from the line or bar chart

Select whether to show and customize the legend on the chart area:
- Select the legend position: Top, Left, Bottom, or Right.
- Align the legend to start, center, or end within the component.
- Set the legend items padding.
- Select the Point style checkbox for the dot legend marker or clear the checkbox for the square legend marker.
- Set the point width in the following way:
  - Select the Point style checkbox to change the padding between the legend marker and label.
  - Clear the Point style checkbox to change the width of the legend square marker.
- Set the point height.

Contact your administrator to change the default font, expand the list of font weights, and customize theme colors in a color picker within the item template.

Type-specific properties

Depending on the chart type—Line, Bar, or Doughnut—you can customize its specific datasets and items with options available.

Line

Unfold the required DATASET section to enter the dataset label.

In the DATASET ITEMS section, you can do the following:

Use the button to add up to 15 items.
Set the X-/Y-axis values and min/max values for the error bar in the required ITEM section. The error bar reveals the range of true values for the line graph.
Change the default minimum and maximum values set for the Y- and X-axes.
If the values entered in the DATASET ITEMS section exceed the values set in the default minimum and maximum Y- and X-axes fields, the axes on the chart area are automatically adjusted to match the DATASET ITEMS values.
Select whether to show gridlines on the chart area.
Enter the X-/Y-axis name.
Select whether to show values on the chart area. Y values of dataset items are displayed. Not applicable to ITEM 1 in the DATASET ITEMS section.
Select the Animation checkbox to add a dynamic effect to your chart. Animation is applied to all chart elements at once.

Bar

Unfold the required DATASET section to enter the dataset label.

In the DATASET ITEMS section, you can do the following:

Use the button to add up to 15 items to the graph.
Set the Y-axis value and min/max values for the error bar in the required ITEM section. The error bar reveals the range of true values for the bar graph.
Change the default minimum and maximum values set for the Y-axis.
If the Y-axis values entered in the DATASET ITEMS section exceed the values set in the default minimum and maximum Y-axis fields, the Y-axis on the chart area is automatically adjusted to the DATASET ITEMS value.
Select whether to show gridlines on the chart area.
Enter the X-/Y-axis name.
Select whether to show the ITEM 1 values from all datasets on the chart area.
Select whether to group items of datasets. A bar group consists of different dataset items of the same number. Select the Disable bar groups checkbox to show columns for the first items of datasets on the chart area. Or you can clear the checkbox to show columns for grouped dataset items.
Select the Animation checkbox to add a dynamic effect to your chart. Animation is applied to all chart elements at once.

Doughnut

Unfold the DATASET section to enter the dataset label.

In the DATASET ITEMS section, unfold ITEM to set its value.

Select whether to show values on the chart area.
- In the CHART VALUES SOURCE field, select from the drop-down list:
  - First dataset element—to display the ITEM 1 from the DATASET 1 section value followed by the symbol stated in the CENTER ELEMENT TEXT ENDING SYMBOL field.
  - Custom text—to display your text entered in the CUSTOM CENTER ELEMENT TEXT field. You can also add the required symbol to follow the text in the CENTER ELEMENT TEXT ENDING SYMBOL field.

The numerical marks on the X-/Y-axis are automatically set according to the X-/Y-axis values entered in the DATASETS ITEMS section for line and bar graphs.

Axis border removal

To delete the required axis border, click in the X-/Y-BORDER COLORsection. Or you can click No color in the color picker.

Bar graph

You can delete the Y-axis border only with the X-axis border.