The Pie Chart element is one of the most intuitive ways to visualize your data on a circular chart. Each slice represents the percentage of a category within the total.

The Pie Chart element is supported in both web and mobile applications.

Use Cases

• Displaying market share by product category,
• Visualizing budget distribution,
• Presenting survey results as percentages,
• Analyzing department-based expense or revenue shares, etc.

Market Share Analysis

A company uses a Pie Chart to show the share of different product categories in total sales.

• X: Categories (Electronics, Clothing, Furniture...)
• Y: Sales revenue (₺)
• Each slice shows the percentage share for that category.
• When the tooltip opens, the category name + sales amount + percentage share are displayed.

Connecting the Data Source

1. Go to the Datasources module.
2. Click the + icon next to the Tables heading and name the table “CategoryPieData”.
3. Create the following table.

4. Then click SQL Actions and name the action “CategoryPieData” via SQL Actions.
5. Alternatively, you can also create it with C#.

using System;using System.Data;public class Script{// Kuika C# Action: CategoryPieDatapublic DataTable Execute(){var table = new DataTable(“CategoryPieData”);table.Columns.Add(“Id”, typeof(Guid));table.Columns.Add(“Category”, typeof(string));table.Columns.Add(“Value”, typeof(decimal));// (Optional) You can enable the following for color control:// table.Columns.Add(‘ColorHex’, typeof(string)); // such as “#4F46E5”table.Rows.Add(Guid.NewGuid(), “Electronics”, 35.2m /*, “#4F46E5”*/);table.Rows.Add(Guid.NewGuid(), “Home & Kitchen”, 22.8m /*, “#06B6D4”*/);table.Rows.Add(Guid.NewGuid(), “Books”, 14.5m /*, “#22C55E”*/);table.Rows.Add(Guid.NewGuid(), ‘Clothing’, 18.0m /*, “#F59E0B”*/);table.Rows.Add(Guid.NewGuid(), “Others”, 9.5m /*, “#EF4444”*/);return table;}}

‍

SQL Example

SELECT ‘Electronics’ AS Category, CAST(2500 AS BIGINT) AS SalesCount, 500000.00 AS SalesRevenueUNION ALLSELECT ‘Clothing’, CAST(1800 AS BIGINT), 300000.00UNION ALLSELECT ‘Furniture’, CAST(1200 AS BIGINT), 280000.00UNION ALLSELECT ‘Cosmetics’, CAST(900 AS BIGINT), 150000.00UNION ALLSELECT ‘Sports’, CAST(600 AS BIGINT), 100000.00

‍

UI Design Module Operations

1. Click the Add Action button on the right side of the application screen.
2. Select the Custom > CategoryPieData action.
3. Add the Pie Chart element.
4. Select the CategoryPieData action from the Properties panel Datasource field.

Using Properties in the Scenario Context

• Datasource
  
  • Description: Specifies the source of the data to be used in the chart.
  • Example: CategoryPieData
• Data Label
  
  • Description: The category name to be displayed on the slice.
  • Example: “Electronics”
• Tooltip Custom Title Data Label
  
  • Description: The category name in the tooltip title.
  • Example: Tooltip → “Furniture”
• Tooltip Custom Content Data Label
  
  • Description: Data to be displayed as an explanation in the tooltip.
  • Example: “Sales Revenue: 280,000 ₺”
• Multi Tooltip Content Fields
  
  • Description: You can display multiple fields in the tooltip.
• Data Field
  
  • Description: Main value field.
  • Example: SalesRevenue
• Data Bg Color
  
  • Description: Color for each slice.
  • Example: Electronics → Blue, Clothing → Green, Furniture → Orange…
• Second/Third Data Field & Bg Color
  
  • Description: Optional fields for the second/third data series.
• Legend
  
  • Description: Position of slice descriptions (top, bottom, left, right).
• Show Data Labels (web only)
  
  • Description: Shows value/percentage labels above the slices.
• Data Label Formatter (web only)
  
  • Description: Label formatting.
  • Options: Money → $10,000, Percent → 45%, Fractional → 12.34

When the Scenario Step is Complete

• The pie chart is divided into slices: Electronics, Clothing, Furniture, Cosmetics, Sports.
• The size of each slice is determined by the sales revenue of the corresponding category.
• When the tooltip is opened, the category + sales amount + percentage are displayed.
• Users can easily analyze market shares.

Limitations

• The “Show Data Labels” and “Data Label Formatter” features only work in web applications.
• On mobile, data points are only visible via the tooltip.

Tips and Best Practices

Adding too many categories can make the chart complex → ideal: 5–8 categories

• High color contrast should be selected.
• For large data sets, a Donut Chart or Bar Chart may be more appropriate than a Pie Chart.