Chart property: Pie and funnel chart

A pie chart is a circular chart divided into slices, each representing a portion of the whole. The size of each slice is proportional to the value it represents with the total. Pie charts are primarily used to display categorical or qualitative data. They effectively visualize proportions, percentages, or comparisons between different categories.

A funnel chart is a specialized type representing data progression through different process stages. It resembles an inverted pyramid, with different segments representing each stage. The width of each segment represents the quantity or value at each stage, and the segments are ordered from the top (initial stage) to the bottom (final stage).

Here are some key aspects of a pie chart:

• Composition Analysis: Pie charts are commonly used to analyze the composition or breakdown of a whole into its parts. Each slice of the pie represents a different category or data point, and the size corresponds to the proportion or percentage it contributes to the total. Pie charts are especially useful for displaying data with limited categories.
• Proportional Representation: The area of each slice in a pie chart represents the proportion of the data it represents. The larger the slice, the greater the value or percentage it represents. This makes comparing the relative sizes and proportions of the different categories or data points easy.
• Visualizing Percentages: Pie charts often display percentages, as the pie represents 100%. The size of each slice corresponds to the percentage it represents, allowing for a quick visual understanding of the distribution or composition of the data.
• Highlighting Dominant Categories: Pie charts effectively highlight dominant categories or data points. The largest slice stands out visually, highlighting the category with the highest value or proportion. This makes it easy to identify the most significant contributors or the most prevalent category within the data.

Here are some of the best usages of pie charts:

• Proportional Analysis: Pie charts are ideal for showing a dataset’s proportion or distribution of categories or segments. They provide a quick and intuitive visual representation of how each category contributes to the whole. For example, a pie chart can show different competitors market share or sales distribution across various product categories.
• Percentage Comparison: Pie charts effectively compare percentages or relative sizes of different categories. The size of each slice in the pie chart represents the proportionate value of each category in terms of the total. This makes it easy to compare the magnitude or significance of each category at a glance.
• Visualizing Ratios: Pie charts illustrate ratios or percentages in various contexts. They can represent market shares, budget allocations, survey responses, demographic distributions, and more. Pie charts allow viewers to quickly understand the relative proportions and make comparisons between different segments.

Advance Properties of Pie Chart

The user must select at least one attribute and one measure. Based on your data and requirements, choose a chart. To customize the Pie Chart’s advance properties, click “Customisation.”

Series

In Series, the user can customize the properties of the selected series.

Users can customize the following options:

1. Select the attribute type from the drop-down menu (For example, we have selected profit).
2. Type: To ensure feasibility, the user can change the chart type directly from the drop-down menu. The menu offers pie, funnel, and pyramid charts.
3. Enable Thousand Separators: This will add a thousand separators to the value shown in the chart. For example, if the value is 285082, it will be shown as 285 082 after applying a thousand separators.
   Note: “This option becomes available when you uncheck the ‘Apply General Number Formatting’ box.”
4. Precision: Add the values shown after the decimal. For example, if the user enters 2, the value will be displayed as 7564.26; if entered 3, the value will be 7564.261.
5. Abbreviation: The user can add an abbreviation to the value shown in the chart. There are None and Auto options available. In None, the value in the chart will be displayed as 285082, and in the Auto option, it will be shown as 285.08K.
6. Numeric format: Refers to how numbers are displayed on a chart. Options include none, auto, thousands, millions, and billions. Users can choose the appropriate data points format based on their needs.
7. Remove Space: Removes any space between numbers and units/abbreviations (e.g., shows 100K instead of 100 K).
8. Formatter Text: To add the format text with the value. For example, the user can enter “$” in the formatted text box if the value is in dollars.
9. Formatter Text Position: The user has two options to position the formatted text: Right and Left. For example, if the value is 285, 082K, and the user selects Right, then the output will be shown as 285, 082K$, where $ is placed at the right side of the value.
10. Color: The user can select the color of their choice from the different color scales provided. In addition, the user can also assign the color of their choice to each series from the Series Data section.
11. Set Color Rules (Add New Rule): This applies conditional formatting to the grid or chart, where the user can set different colors according to the rule/conditions set. Details of the same are given below:Users can apply
12. Conditional Formatting in a grid or chart by clicking Add New Rule.Conditional formatting in a grid or chart allows the user to apply formatting to cells in a grid based on specific conditions. This is useful for highlighting important data and making it easier to understand.The user has to fill in the following to apply conditional formatting in a chart or grid:
    • Select Table Column: When creating the chart, the user needs to select the column corresponding to the measure selected.
    • Select Condition: Setting the condition for applying the formatting. This contains the following conditions:
      • Is equal to
      • Is less than
      • Is less than equal to
      • Is greater than
      • Is greater than equal to
      • Is not equal to
      • In Between
    • Select Condition Type: The user will select the condition here. The option available is As value.
    • Value: The user has to set the value to apply the condition. It can be of any value as per the user.
    • Set Fill Style: Users can customize the bar or grid color filling. For example, if I want to see a value above 10000 in green and less than 5000 in red, I can select the color for every condition for every table column.
    • Convert to Gradient: The user can change the color into a gradient, which will flow from one color to another.
    • Add Median Color: The user can also add a median color between the two points, i.e., high and low. So, it will be low-median-high.
    • Border customization: The user can customize the bar’s borders.
    • Border Width: The width of the border ranges from 1 to 3.
    • Border Style:The user can choose between none, solid, and dashed.
    • Border color: The user can customize the border’s color.

Series Data

In Series Data, the user can customize the properties of the selected series:

• Select the series from the drop-down menu to change its color.
• Color: The user can pick the color of their choice for the selected series data.

General

In General, the user can customize the general properties of the chart.

Users can customize the following options:

1. Chart Background Color: The user can change the chart’s background color according to their needs.
2. Plot Border Color: The color used for the border or outline of the plotting area in a chart. This border can help delineate the area where data points, bars, lines, or other visual elements are displayed, making the chart easier to read and visually appealing.
3. Plot Border Width: Refers to the thickness or width of the border or outline around the plotting area in a chart. A thicker border can make the plotting area stand out more prominently, while a thinner border can provide a more subtle delineation.
4. Show data labels: This shows the labels on the top of the bar; the user can enable or disable it by checking or unchecking the box.
5. Data Label Font Size: Refers to the text size used for data labels on a chart. It determines how large or small the text appears when displaying numerical values or labels directly on data points, bars, or other chart elements.
6. Data Label Color: This setting refers to the color used for the text of data labels displayed on a chart. It allows users to customize the appearance of the labels that accompany data points, bars, or other elements in a chart.
7. Data Label Distance: Users can adjust the distance between the pie and data labels by increasing or decreasing the value. For instance, if the value is increased to 50 from 30, the distance between the pie and data labels will be greater. This allows users to fine-tune the positioning of the data labels to optimize visual clarity and avoid overlap.
8. Hide Data Label below (%): This property allows users to selectively hide data labels based on a user-defined percentage threshold. Hiding less significant data labels helps improve clarity and focus on the visualization, reducing clutter in the chart.
9. Chart Size: This refers to the dimensions of a chart, usually defined by its width and height. Adjusting the chart size can affect its readability and overall appearance.
10. Thickness: It controls the width of the chart’s borders. A higher value makes the borders thicker, while a lower value makes them thinner. In your example, it’s set to 2, giving moderate visibility to the borders.

Legends

In Legends, the user can customize the legends chart properties.

Users can customize the following options:

• Show Chart Legends: Check or uncheck the box to enable or disable this option to show the chart legends. For example, in the below image, Segment is visible when we enable the chart legends.
• Align Legends: The user can align the legends to the left, center, or right. For example, we have aligned the legends in the center so they are visible in the center of the chart.
• Legends Position: The user can also change the legends position to the top, middle, or bottom. For example, we have selected the middle position for the legends.
• Legends Layout: This setting controls how the legend entries are displayed. In the provided example, the layout is set to “Horizontal,” meaning the legend items are aligned side-by-side. You could also change this to “Vertical” if you prefer the items to be stacked on top of each other.
• Border Width: This setting determines the thickness of the border around the legend. In this case, it’s set to 2, meaning the legend box will have a thin border around it. Adjusting this will make the border thicker or thinner, depending on your preference.
• Max Height: This setting controls the maximum height of the legend. If the legend exceeds this height, the chart will restrict its height to this value. Here, it’s set to 70, meaning the legend will not grow taller than this limit. This helps in keeping the layout compact and avoiding excessive vertical space consumption.
• Float Legends: This option allows the legend to “float” freely in the chart space, meaning it can be repositioned independently of the chart. If this checkbox is unchecked, the legend stays fixed in the specified position (top, bottom, etc.).
• Background Color: This is the color of the legend, which will be seen in the legend’s background. The user can select the color based on feasibility.

Spacing

In Spacing, the user can customize the spacing of the chart.

Users can customize the following options:

• Margin Top: The user can customize the margin of the chart from the top. It is set to 0 as default; increasing the value will increase the margin from the top.
• Margin Bottom: The margin from the bottom can be customized by the user; it is also set to 0 as default, and increasing the value will increase the margin from the bottom.
• Margin Left: The user can customize the margin of the chart from the left. It is set to 0 as default; increasing the value will increase the margin from the left side of the chart.
• Margin Right: The margin from the right can be customized by the user; it is also set to 0 as default; increasing the value will increase the margin from the right side of the chart.
• Spacing Top: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the top, the legend will be pushed downward.
• Spacing Bottom: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the bottom, the legend will be pushed upward.
• Spacing Left: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the left, the legend will be pushed more rightward.
• Spacing Right: It defines the spacing of legends from the chart area. For example, if we increase the spacing from the left, the legend will be pushed more leftward.

Tooltip

In Tooltip, the user can customize the tooltip properties of the chart.

Users can customize the following options:

• Enabled: To enable the tooltip in the chart, the user has to check this box. After that, the user can see the tooltip when the user hovers over the chart.
• Tooltip Background Color: The user can change the tooltip background color.
• Tooltip Font Color: The user can change the font color used in the tooltip to match the background color.
• Tooltip Border Radius: The user can also change the radius of the tooltip box to get the tooltip appearance as per feasibility.
• Tooltip Border Width: To change the border width of the tooltip, the user can increase the value, and the border width will increase accordingly.
• Tooltip Border Color: The user can also change the border color of the tooltip.
• Hide Delay: This is to change the delay time of tooltip disappearance. The user can increase it to increase the delay time more or decrease it to decrease the delay time of the tooltip in a chart after the user hovers above it.