Area chart

Estimated reading: 19 minutes 464 views

An area chart displays quantitative data as a series of filled areas, representing the magnitude or proportion of the data over a continuous range or time. It is like a line chart, but the area between the line and the axis is filled with color or pattern to emphasize the magnitude of the values.

Here are some key aspects of an area chart:

Magnitude Representation: An area chart effectively represents the magnitude or proportion of data values. The filled areas between the line and the axis convey the magnitude of the data points, making it easy to compare the values across the chart. The larger the area, the higher the data value at that point.
Part-to-Whole Comparison: Area charts can also be used to compare the contribution of different categories or groups to a whole. Plotting multiple filled areas on the same chart, each representing a different category or group, you can visually compare their proportions and contributions to the total value.
Data Overlaps: The filled areas may overlap in an area chart, especially when plotting multiple data series. This allows for a visual comparison of the overlaps, showing the intersections or commonalities between the data. Overlapping areas can indicate shared or competing values between different categories or groups.

The best usage of an area chart depends on the specific data and insights you want to convey. Here are some common scenarios where an area chart is particularly effective:

Proportion Comparison: Area charts are ideal for comparing the proportions or contributions of different categories or groups. By plotting multiple filled areas on the same chart, you can easily compare the magnitude and relative sizes of the areas. This is valuable for analyzing market share, budget allocations, or the distribution of resources among various categories.
Visualizing Cumulative Data: Area charts effectively represent cumulative data. By stacking the filled areas on top of each other, you can observe the accumulation and progression of the values over time or along an axis. This visualizes cumulative sales, population growth, or revenue.
Highlighting Data Patterns: The filled areas in an area chart help highlight the patterns and fluctuations in the data. The visual emphasis on the filled regions can make it easier to identify trends, seasonal variations, or sudden changes in the values. This is beneficial for identifying revenue spikes, seasonal sales patterns, or anomalies in the data.
Data Comparison: Area charts can compare multiple data series. Plotting the filled areas for different variables or data sets on the same chart allows you to visually compare their magnitudes and patterns. This is valuable for analyzing the performance of different products, comparing market trends, or evaluating the impact of various factors on an outcome.

Advance Properties of Area Chart:

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

Series

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

Users can customize the following options:

Select the attribute type from the drop-down menu (For example, we have selected profit).
Color:The color the user wants to give to the selected attribute line.
Negative Color: If the data has negative values, the bar will be inverted in the negative direction.
Type: To ensure feasibility, the user can change the chart type directly from the drop-down menu. The menu offers spline, bar, column, line, and area charts.
Apply General Number Formatting: This feature allows users to format numerical data consistently across a dataset or chart. Check this box to enable it.
Enable Thousand Separators:This will add a thousand separator 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 separator.

Note: “This option becomes available when you uncheck the ‘Apply General Number Formatting box.”

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.
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.
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 the dollars.
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.
Order:This is for ordering the visibility of the series. For example, in a line+ grouped chart, if a user selects order 2 for the line series and 1 for the bar series, then the Line will be shown overlapping the bar. This chart property works only when the user selects grouped charts.
Data Label Horizontal Position and Data Label Vertical Position refer to the placement of data labels on a chart relative to the data points they represent.
Hide Series: This option hides the selected series whose name is shown in the drop-down; the user can change the series to hide as required. For example, if the user selects the Profit series, the Profit series in the chart will be hidden if the user checks the Hide Series option.

General

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

Users can customize the following options:

Zoom:The user can zoom into the chart from different angles for a clearer view. First, the user needs to select the zoom option and then drag the part of the chart the user wants to zoom; the options are:
- Horizontal zoom: It will zoom horizontally to the part of the chart the user wants to zoom in by dragging it.
- Vertical zoom: It will vertically zoom to the part of the chart that the user wants to see by dragging it.
- Zoom for both axes: It will zoom to the part of the chart the user wants to zoom in by dragging it.
Chart Background Color: The user can change the chart’s background color according to their needs.
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.
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.
Background: Here, the user can set the background color.
The user can enable the following:
- 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.
- Allow data label overlap: This setting controls whether data labels (names, values, or percentages) overlap on the chart or graph.
- Auto-align chart if multiple y-axes: This feature adjusts the chart’s alignment when multiple Y-axes are present. It ensures that the chart remains clear and readable by adequately positioning and scaling the axes.
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.
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.
Hover Background Color:The user can change the point hover background color, which is visible when the user hovers on the chart. For example, here, we have selected grey.
Enable Thousand Separators:This will add a thousand separator 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 separator.
Formatting Type: The user can change the data format to be viewed in the chart’s tooltip. The available formats are 123,456,789 and 12,34,56,789; the user can select the format based on whether it is feasible to see the data in the chart in the same format as specified.
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.
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.
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 the dollar.
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.

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 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:

Plot Border Width:The user can edit the plot border width as feasible.
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.
Users Shared Tooltip:When enabled, this option shows the bar’s tooltip in a single box; the user can enable or disable this option by checking or unchecking the box.
Show Spilitted Tooltip:The user can enable or disable splitting the tooltip into two parts for each segment by checking or unchecking the box.

Value Scale (Y-axis)

Value Scale (Y-axis): the user can customize the value scale of the Y-axis in the chart.

Users can customize the following options:

Grid Line Width:The user can change the width of the grid line of the Y axis in the chart; these are the horizontal lines presented at certain intervals.
Scale Interval: The user can change the scale of the interval; the value after the interval will be there.
Allow Decimal Scale: This feature determines whether a chart’s scale can display decimal values. When enabled, the chart’s axis can show numbers with decimal points, providing more precise data representation.
Min Value:Set the minimum value of the Y-axis from where the Y-axis value begins in the chart.
Max Value:To set the maximum value of the Y-axis from where the Y-axis value ends in the chart.
Labels Font Size:Users can change the Y-axis labels font size.
Label:Same as font size, the user can also change the label of the Y-axis.
Title Margin:The user can adjust the margin of the Y-axis title.
Start Control:This is the initial point value for the Y-axis, which is visible in the chart.
End Control: It represents the final point for the Y-axis.
Set Format: This option allows users to define how data is displayed on a chart or graph. It typically includes the following formats: Numeric, Time format, and Logarithmic.
Label Color: This setting allows users to customize the color of text labels on a chart. Labels can include titles, axis labels, data point labels, and legends. Adjusting the label color helps improve readability, contrast, and the overall aesthetic of the chart, ensuring that the information is visible and visually appealing.
Label Title Color: This setting allows users to customize the color of the title labels on a chart, such as the main title, axis titles, and section headers.

Category Scale (X-axis)

In Category Scale (X), the user can customize the category scale of the X-axis in the chart.

Users can customize the following options:

Grid Line Width:The user can change the grid line width on the X-axis in the chart; these are the vertical lines presented on the X-axis.
Labels Font Size:The user can change the labels font size to X-axis.
Scroll After Width: This allows the user to limit the number of bars shown on the chart. For example, if the user enters five as a value, the chart will show only five bars out of the total; to view more than five bars, the user must scroll. In a vertical bar chart, the user needs to scroll left to right; in a horizontal bar chart, the user needs to scroll up to down.
Title:This is the title of the X-axis; the user can give the title of their choice.
Label Color: This setting allows users to customize the color of text labels on a chart. Labels can include titles, axis labels, data point labels, and legends. Adjusting the label color helps improve readability, contrast, and the overall aesthetic of the chart, ensuring that the information is visible and visually appealing.
Label Title Color: This setting allows users to customize the color of the title labels on a chart, such as the main title, axis titles, and section headers.

Analysis Line

Visual lines in a chart represent trends, patterns, or relationships between data points. They are commonly used in line charts, scatter plots, and other charts to visually connect data points and represent the data’s behavior over a continuous range.

Here are some critical aspects of visual lines in charts:

Trend Representation:Visual lines in a chart can represent the overall trend or direction of the data. The line connects the data points in a line chart, allowing viewers to observe the data’s upward, downward, or flat trends. This helps in understanding the overall pattern or trajectory of the data series.
Interpolation: Visual lines can be used to interpolate between data points, estimating the data’s value at specific points within the range. This is particularly useful when the data is unavailable for every moment, and you want to infer the values between the data points.
Smoothness: The smoothness of the visual line can vary depending on the chart and the data being represented. In some cases, the line may be a straight connection between data points, while in other cases, it may be a curved or smoothed line that provides a more continuous representation of the data’s behavior.
Highlighting Relationships: Visual lines can highlight relationships between data series or variables. For example, in a scatter plot, connecting the data points with lines can reveal correlations or associations between variables, indicating the strength and direction of the relationship.

The best usage of visual lines in a chart depends on your data analysis’s specific goals and context. Here are some common scenarios where visual lines can be effectively utilized:

Trend Analysis: Visual lines help analyze trends over time or a continuous range. Line charts are commonly employed to showcase the progression of data points, enabling you to observe patterns, fluctuations, or overall trends. This is beneficial for tracking metrics such as sales figures, stock prices, or website traffic over a period.
Comparative Analysis:Visual lines can help compare multiple data series or variables within a chart. Connecting the data points with lines lets you visually assess the relative performance or relationship between categories or groups. This is valuable when examining market share, comparing product sales, or evaluating performance across different regions.
Storytelling and Data Communication:Visual lines can enhance storytelling and data communication by providing a straightforward narrative or highlighting critical points in the data. Using lines strategically can guide the audiences attention, emphasize significant trends or turning points, and facilitate comprehension of your data story.

Steps to add analysis line:

Click “Add New” to insert an analysis line.
Next, specify the conditions for the analysis line by selecting the visual line type, either custom or dynamic. For a custom visual line, enter the specific value. For a dynamic visual line, choose the measure to be used.

Let’s see both conditions:

Case 1: Custom Visual Line

In a custom visual line, the user can set the value manually.

Case 2: Dynamic Visual Line

In a dynamic visual line, the user selects a measure from the given measures and chooses the aggregate of Sum/Average/Minimum/Maximum.

After selecting the chart type and entering the value, the user can choose the line style and color.
Position:The user can select the position of the visual line, whether it will be visible in the front of the bars or at the back.
Transparency: The user can increase or decrease the transparency of the visual line by dragging the slider.
Data Label:This option allows the user to customize the data label options of the visual line. The user can enable or disable the data label by checking or unchecking the box.After enabling the data label, the following fields will appear:
- Color (Data Name):The user can change the color of the name given to the visual line.
- Font size: The font size of the data label user can increase or decrease as needed by simply clicking on + to increase and – to reduce the font size.
- Font style: Style of the data label font; the user can select from the three font styles- bold, italic, and underlined font.
- Show Data Name: By enabling this option, the user can add a name to the visual line by entering in the field provided.
- Show Data Value:The data value entered by the user will be visible in the chart when this option is enabled. The user has to check the box to show the data value.
When you enable the “Show Data Value” option, the following settings are available:
- Enable Thousand separator
- Formatting type
- Precision
- Formatter text
- Formatter text position
- Abbreviation
- Numeric format
Note: Refer to the section “General” for details.
- Position:The user can change the data label’s position and value from the visual line.
- Alignment:Same as position, the user can also change the alignment of the data name and value. There are three options- Left, Middle, and Right.
- Alignment margin:The user can align the margin of the data label from the chart plot; if the user increases the margin in a vertical chart, the data label will move towards the right side, and in the horizontal chart, the data label will move downward and vice versa.