Skip to end of metadata
Go to start of metadata
General


Component Palette Icon:



Description

A Pie Chart displays a list of named items, each of which has a value that is part of a total. The total is the sum of the value of each item. The key to the Pie Chart component is the data property, which contains the items that will be displayed as pie wedges. It is fully customizable in its appearance, from colors, line widths, text styles, and more.

This feature is new in Ignition version 8.1.2
Click here to check out the other new features
The Pie Chart component had two pre-configured variants:

  • Flat Chart - Default component described above.
  • Three-Dimensional Chart - Component pre-set with three-dimensional pie wedges.



Perspective Component Events
The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

Pie Chart Example

The Pie Chart component can be used for things like inventory tracking. Below is an example that uses a Pie Chart to display the inventory of a local ice cream shop:

  1. From the Perspective section of the Project Browser in your Designer, right click on the Views folder and select New View... to create a new view.
  2.  This will bring up the New View window. Give your view a name and select the Coordinate Root Container type. The Page URL setting will remain unchecked for this example.



  3. From the Perspective Component Palette, drag and drop a Pie Chart onto your newly created view. 
  4. Set the Pie Chart's title property to "Ice Cream Inventory".
  5. Copy the array below and paste it on the Pie Chart's data property. 

    [
      {
        "flavor": "Vanilla",
        "count": "50"
      },
      {
        "flavor": "Chocolate",
        "count": "15"
      },
      {
        "flavor": "Strawberry",
        "count": "68"
      },
      {
        "flavor": "Cookies and Cream",
        "count": "19"
      },
      {
        "flavor": "Mint Chocolate Chip",
        "count": "9"
      },
      {
        "flavor": "Chocolate Chip",
        "count": "53"
      },
      {
        "flavor": "Pistachio",
        "count": "48"
      }
    ]

    The array above is a an array of objects. Each object is a dictionary containing key/value pairs where the keys of each dictionary represent ice cream flavors and ice cream inventory counts with their respective values for each. Value types can vary as you can pass both "50" and 50 as counts and the Pie Chart will still be able to render the data correctly. The Pie Chart can have various forms of data sources. The data source array can be built via scripting following the above format or it can be built using a query binding on the Pie Chart's data property. The query used must return two columns in any order where each column represents a string and a numeric value to be rendered by the chart. 

  6. Once you have done this, your Pie Chart should look like this which is an accurate representation of the inventory data for this ice cream shop:

     
Properties
NameDescriptionProperty Type
dataData source for the chart. Each object within an array defines the name and value for a single pie section.array
colorsColors that correspond to each pie section, respective of order in data. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.array
titleName to display for this chart.value: string

tileColor

Color of the title. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

color

valueFormat

Label and legend value format configuration.

Name Description Property Type
showPercentSymbolWhether to show the percent symbol next to the percent value.value: boolean
showValueAsPercentWhether to show the value as percent.value: boolean

array

showLabels

Whether to show labels for each section of this chart. Default is true (show).

value: boolean

labels


Settings for the labels.


 Click here to see the label settings
NameDescriptionProperty Type

showName

Whether to show the name on the label.

value: boolean

showValue

Whether to show the value on the label. Hiding values will disable any value formats set.

value: boolean

bentBend labels around chart slices. Default is false.value: boolean

align

Whether the labels should be aligned in vertical columns.

value: boolean

inside

This feature is new in Ignition version 8.1.2
Click here to check out the other new features
Settings for showing labels inside of the chart slices instead of outside.

NameDescriptionProperty Type
enabledValue that determines whether to show the labels inside of the chart slices instead of outside, based on if the value percentage is below the percentLimit threshold. value: boolean
radiusDistance in percentage towards center of Pie Chart while inside is enabled. 0 represents outside edge while 100 would be directly in the middle. value: numeric
colorLabel color for labels while they are displayed inside the chart. value: color
percentLimitValue that determines at what value percentage to place label on outside of chart instead of inside. value: numeric
object
wrap

Label text wrapping configuration. Ability to wrap long labels.

NameDescriptionProperty Type
enabledEnables label text wrapping. Default is false.value: boolean
maxWidthThe maximum allowable label width, in pixels.value: numeric
object
color

Color of the labels. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.

color

object

showLegend

Whether to show a legend for this chart. Default is true (show).

value: boolean

legend

This feature is new in Ignition version 8.1.2
Click here to check out the other new features

Settings for legend. 

NameDescriptionProperty Type
fontSizeFont size for legend labels.value: numeric
icon

Settings for the icon on entries in the legend. 

NameDescriptionProperty Type
heightHeight value of legend icon.value: numeric
widthWidth value of legend icon.value: numeric
enabledValue that determines whether to show the legend icons or hide them.value: boolean
object
positionAligns legend to specified direction.value: string
object

legendLabelColor

Color of the legend labels.

color

cutoutRadiusPercent of total radius to cut out of center of chart. If greater than zero, the chart becomes ring-style instead of pie.value: numeric
selectOutline

Outline for each section of the pie. Options are as follows:

NameDescriptionProperty Type
widthWidth of the border (in pixels) around the pie section.value: numeric
colorColor of border around each pie section. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
opacityOpacity of border around each pie section. 0 is fully transparent, 1 is fully opaque.value: numeric
object
enableTransitionsWhether the chart has visual transition effects for changes in chart data.value: boolean
threeDimensionalWhether the chart has depth effect to look three-dimensional.value: boolean
styleUse styles to customize the visual style of the component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object




  • No labels