Pie Chart

Overview

A pie chart draws pie and donut charts. The main components of a pie chart are:

• Series
• Legend

The Series defines the data elements to add to the chart. Each series can define its own color, push out and various other options.

The Legend displays a small graphic indicating the color of the series data in the chart along with a label describing the data.

Complete documentation on Pie Charts can be found at LiveCharts2.

Examples

Pie Chart

Component Definition

{
    "type": "PieChart",
    "title": "Pie Chart",
    "chartStyle": {
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        },
        "legendPosition": "Right"
    },
    "style": {
        "layoutOptions": [
            { "alignment": "center" },
            { "height": 220, "width": 300 }
        ]
    },
    "defaultSeriesStyle": {
        "legendSize": 12
    },
    "series": [
        {
            "name": "@(pieChart[0].name)",
            "dataQuery": "pieChart[0].values", 
            "style": { 
                "fill": { 
                    "color": "#8CB84C"
                } 
            } 
        },
        { 
            "name": "@(pieChart[1].name)",
            "dataQuery": "pieChart[1].values", 
            "style": { 
                "fill": { 
                    "color": "#4B84C2"
                } 
            } 
        },
        { 
            "name": "@(pieChart[2].name)",
            "dataQuery": "pieChart[2].values", 
            "style": { 
                "fill": { 
                    "color": "#DB4B37"
                } 
            } 
        }
    ]
}

Data

{
  "pieChart": [
    {
      "name": "Expenses",
      "values": [7122.13]
    },
    {
      "name": "Income",
      "values": [3400.33]
    },
    {
      "name": "Taxes",
      "values": [2011.14]
    }
  ]
}

Donut Chart

Component Definition

{
    "type": "PieChart",
    "title": "Donut Chart",
    "chartStyle": {
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        },
        "legendPosition": "Right"
    },
    "style": {
        "layoutOptions": [
            { "alignment": "center" },
            { "height": 220, "width": 300 }
        ]
    },
    "defaultSeriesStyle": {
        "legendSize": 12,
        "innerRadius": 45
    },
    "series": [
        {
            "name": "@(pieChart[0].name)",
            "dataQuery": "pieChart[0].values", 
            "style": { 
                "fill": { 
                    "color": "#8CB84C"
                } 
            } 
        },
        { 
            "name": "@(pieChart[1].name)",
            "dataQuery": "pieChart[1].values", 
            "style": { 
                "fill": { 
                    "color": "#4B84C2"
                } 
            } 
        },
        { 
            "name": "@(pieChart[2].name)",
            "dataQuery": "pieChart[2].values", 
            "style": { 
                "fill": { 
                    "color": "#DB4B37"
                } 
            } 
        }
    ]
}

Data

{
  "pieChart": [
    {
      "name": "Expenses",
      "values": [7122.13]
    },
    {
      "name": "Income",
      "values": [3400.33]
    },
    {
      "name": "Taxes",
      "values": [2011.14]
    }
  ]
}

PushOut Chart

Component Definition

{
    "type": "PieChart",
    "title": "Push Out Pie Chart",
    "chartStyle": {
        "titleStyle": {
            "textOptions": {
                "fontSize": 16,
                "weight": "bold"
            }
        },
        "legendPosition": "Right"
    },
    "style": {
        "layoutOptions": [
            { "alignment": "center" },
            { "height": 220, "width": 300 }
        ]
    },
    "defaultSeriesStyle": {
        "legendSize": 12
    },
    "series": [
        {
            "name": "@(pieChart[0].name)",
            "dataQuery": "pieChart[0].values", 
            "style": { 
                "fill": { 
                    "color": "#8CB84C"
                } 
            } 
        },
        { 
            "name": "@(pieChart[1].name)",
            "dataQuery": "pieChart[1].values", 
            "style": { 
                "fill": { 
                    "color": "#4B84C2"
                } 
            } 
        },
        { 
            "name": "@(pieChart[2].name)",
            "dataQuery": "pieChart[2].values", 
            "style": { 
                "fill": { 
                    "color": "#DB4B37",
                    "pushOut": 10
                } 
            } 
        }
    ]
}

Data

{
  "pieChart": [
    {
      "name": "Expenses",
      "values": [7122.13]
    },
    {
      "name": "Income",
      "values": [3400.33]
    },
    {
      "name": "Taxes",
      "values": [2011.14]
    }
  ]
}

Schemas

PieChart

key	type	required	description
type	string	required	A string defining the component type as a PieChart.
title	string	optional	An optional Title for the chart. Location, formatting and other settings for the title are set in the ChartStyle.
chartStyle	string or PieChartStyle	optional	Either a style identifier or a style object used to define various settings for the chart.
series	PieChartSeries[]	required	An array of PieChartSeries objects that define each data series to display in the chart.
seriesQuery	string	optional	A JSONata query selecting the series data to display in the chart. The return value of the query must be an array of ChartSeries objects. This value is not allowed if series is defined.
seriesQueryStyles	PieChartSeriesStyle[]	optional	An array of styles to use if using seriesQuery. Styles are applied in order and reused once exhausted. Required if seriesQuery is defined.
defaultSeriesStyle	string or PieChartSeriesStyle	optional	Either a style identifier or a style object used to define default settings for all Series in the chart. Series styles can be overridden at the Series level in the chart definition.
gridRow	integer	optional	The grid row to place the component. Only applicable when inside a GridV2 component.
gridColumn	integer	optional	The grid column to place the component. Only applicable when inside a GridV2 component.
gridRowSpan	integer	optional	The number of rows to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
gridColumnSpan	integer	optional	The number of columns to span inside the grid. Only applicable when inside a GridV2 component. Default value is 1.
rowWidth	float	optional	A fixed width for the component inside the row. Only applicable when inside a RowV2 component.
rowRelativeWidth	float	optional	A proportional width for the component inside the row. Only applicable when inside a RowV2 component.

PieChartStyle

key	type	required	description
titleStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the title.
legendStyle	string or Style	optional	Either a style identifier or a style object used to define the text formatting options for the legend. Any layoutOptions in the style are ignored for the legend. For a more detailed explanation of the style system, see Styles.
legendPosition	string	optional	The location for the chart legend. Must be one of: Hidden, Top, Left, Right, or Bottom. Default value is Hidden.
legendBackgroundPaint	Paint	optional	An optional Paint object for drawing the background of the legend.
initialRotation	integer	optional	Sets the angle, in degrees, where the first slice of data is drawn. Negative or positive angles are allowed.
maxAngle	integer	optional	Determines the complete angle in degrees of the chart. Default value is 360, or a complete circle.

PieChartSeries

key	type	required	description
name	string	required	A string defining the name of the series. As with any other string, string substitution is possible with a JSONata query by using @(QUERY) syntax.
seriesData	ChartSeriesData[]	optional	An array of ChartSeriesData objects that will define the data for the series. If defined, the dataQuery and labelQuery settings are ignored.
dataQuery	string	optional	A JSONata query string that will be used to extract values for this data series. The return value of the query must be an array of floats or integers.
labelQuery	string	optional	A JSONata query string that will be used to extract labels for this data series. The return value of the query must be an array of strings.
style	string or PieChartSeriesStyle	optional	Either a style identifier or a style object used to define options for the series. For a more detailed explanation of the style system, see Styles.

PieChartSeriesStyle

key	type	required	description
fill	Paint	optional	A Paint object that describes the fill color of the data series.
stroke	Paint	optional	A Paint object that describes the stroke color and width of the data series.
showDataLabels	bool	optional	If true, data labels will be drawn for each data point in the series.
dataLabelsStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the series labels.
legendSize	number	optional	The size of the legend for the series, in pixels.
innerRadius	number	optional	The inner radius of the slice in pixels. Default value is 0 which fills the circle.
pushOut	number	optional	Sets the distance in pixels between the center of the chart and the pie slice. Default value is 0.
maxOuterRadius	number	optional	Sets the maximum radius (in percentage) of the slice. Valid values are from 0 to 1, where 1 is the full radius and 0 is none. Default value is 1.