===== PieChart =====

com.ergotech.vib.graphics.javascript.charting.PieChart

==== Image Examples ====

| {{:mistudio:graphics:charts:pasted:20260701-210217.png?40|PieChart in the graphics palette}} | {{:mistudio:graphics:charts:pasted:20260701-210259.png?40|PieChart graphic example}} |
| //PieChart in the graphics palette.// | //PieChart graphic example.// |

==== Overview ====

The PieChart graphic is a chart graphic used to display values as sections of a circle.

PieChart is commonly used to show how values compare as parts of a whole.

Each pie section represents one configured series item, and the size of each section is based on the incoming data value.

==== Common Uses ====

  * Showing parts of a whole
  * Comparing category values
  * Displaying percentage-style data
  * Showing summary dashboard values
  * Displaying one-dimensional array values visually
  * Comparing sections such as categories, groups, or counts

==== Input Behavior ====

PieChart accepts input through **valueInput**.

The input can come from a data source, Constant, BroadcastServer, or another logic component.

PieChart works well with one-dimensional array-style data.

A common test data source is:

  * **ArrayDataSource**

When an ArrayDataSource is connected to PieChart, the array values are used as the pie section values.

For predictable display, the number of array values should match the configured pie sections. For example, if the PieChart has two configured sections, the connected array should provide two values.

==== Output Behavior ====

PieChart is used as a display graphic.

PieChart does not provide a default user-input output workflow.

==== PieChart-Specific Behavior ====

PieChart displays values as circular sections.

PieChart-specific settings include:

  * **Name** Sets the name of the PieChart graphic.
  * **High Value** Sets the high value used for chart scaling or range behavior.
  * **Low Value** Sets the low value used for chart scaling or range behavior.
  * **Series** Configures the pie sections.
  * **TopSpacing** Sets spacing above the chart area.
  * **Use1DInput** Enables the standard one-dimensional array input mode through **valueInput**.
  * **Use Color** Controls whether incoming colors are used when supported.
  * **UseTooltip** Controls whether chart tooltips are shown.
  * **Bad Qual. Indicator** Controls the indicator used when bad quality data is received.
  * **Visible** Controls whether the PieChart is shown.
  * **Warning Qual. Indicator** Controls the indicator used when warning or transitional quality data is received.

==== Logic Ports ====

In the Logic Editor, PieChart includes this default port:

  * **valueInput**

The **valueInput** port receives one-dimensional array-style chart data.

For standard PieChart setup, leave **Use1DInput** enabled and connect a supported one-dimensional data source such as **ArrayDataSource** to **valueInput**.

==== Series Configuration ====

PieChart uses the **Series** property to define the pie sections displayed on the chart.

Each series item represents one pie section.

The Series editor includes a live preview and grouped settings for appearance, radius, label display, and animation.

When an ArrayDataSource provides multiple values, matching pie sections should be configured so each value can display as a separate slice.

For example, if an ArrayDataSource provides two values, the PieChart should have two configured sections.

==== Adding a Pie Section ====

To add another pie section:

  - Select the PieChart graphic in the Design Editor.
  - In the Basic properties, open the **Series** property editor.
  - Click the **+** button in the Series editor.
  - Configure the new section.
  - Set the section appearance, radius, label options, and animation setting.
  - Click **OK** to save the section settings.

{{:mistudio:graphics:charts:pasted:20260706-190848.png?500|PieChart Series editor}}

//PieChart Series editor with preview, appearance, radius, label, and animation settings.//

==== Pie Section Settings ====

The Series editor includes these sections:

  * **Preview** Shows a preview of the configured pie sections.
  * **Appearance** Controls the section color and name.
  * **Radius** Controls the inner and outer radius of the section.
  * **Label** Controls whether labels are shown and where they appear.
  * **Animation** Controls whether animation is enabled for the section.

The **Appearance** section includes:

  * **Section Color** Sets the color of the pie section.
  * **Name** Sets the name of the pie section.

The **Radius** section includes:

  * **Inner Radius (%)** Sets the inner radius of the section. For a standard PieChart, this is usually **0**.
  * **Outer Radius (%)** Sets the outer radius of the section. For a standard PieChart, this is usually **100**.

The **Label** section includes:

  * **Show Label** Controls whether the section label is shown.
  * **Label Position** Sets where the label appears, such as inside the pie section.

The **Animation** section includes:

  * **Animation** Controls whether the pie section uses animation.

==== Multiple Section Behavior ====

Each visible pie section needs a matching configured section in the **Series** property.

For example:

<code>
One array value    = one pie section
Two array values   = two pie sections
Three array values = three pie sections
</code>

If the chart has more data values than configured sections, extra values can fail to appear as separate pie sections.

==== Array Data Behavior ====

ArrayDataSource can be used for PieChart testing.

When ArrayDataSource is connected to PieChart, the array values are used as the values for the configured pie sections.

For example:

<code>
Array value 1 -> first pie section
Array value 2 -> second pie section
Array value 3 -> third pie section
</code>

If the PieChart has two configured sections, use an array with two values for predictable display.

==== Tooltip Behavior ====

The **UseTooltip** property controls whether PieChart displays tooltip information when the user hovers over the chart.

Tooltips are useful for showing the exact value of a pie section.

==== Radius Behavior ====

Each pie section includes **Inner Radius (%)** and **Outer Radius (%)** settings.

For a standard pie chart, the inner radius is usually set to **0** and the outer radius is usually set to **100**.

Increasing the inner radius creates open space in the center of the chart.

==== Notes ====

Use PieChart when values should be shown as sections of a whole.

Use **ArrayDataSource** for simple PieChart testing.

Use numeric or array-style data sources with PieChart. String data sources are not appropriate for numeric pie chart input.

PieChart is separate from DoughnutChart, LineChart, BarChart, and RadarChart. Use PieChart when values should be compared as circular sections.

==== Related Pages ====

  * [[mistudio:design_editor:start|MIStudio Design Editor]]
  * [[mistudio:design_editor:charts:start|Charts]]
  * [[mistudio:design_editor:charts:doughnutchart|DoughnutChart]]
  * [[mistudio:design_editor:charts:linechart|LineChart]]
  * [[mistudio:design_editor:charts:barchart|BarChart]]
  * [[mistudio:design_editor:charts:radarchart|RadarChart]]
  * [[mistudio:getting_started:test_data_sources|Using Test Data Sources]]
  * [[mistudio:getting_started:connect_data_source_to_graphic|Connecting a Data Source to a Graphic]]