Area chart

An Area Chart displays quantitative data over time. It is based on a line chart but fills the area beneath the line, making it useful for showing cumulative values and trends.

When to use an Area Chart

Use an Area Chart when you want to:

• Visualize trends over time with emphasis on the magnitude of change (e.g., revenue growth across years).

• Show cumulative values where the filled area highlights the total impact (e.g., total units sold each quarter).

• Compare multiple categories over a continuous axis (e.g., sales performance by region over a decade).

• Highlight part-to-whole relationships where stacked area charts show how each category contributes to the overall total.

• Identify patterns in volatility such as sudden spikes or dips (e.g., website traffic across different campaigns).

Default Visualization

When you add an Area Chart component, it displays by default with predefined styling and axes. You can customize its appearance and behavior using the Properties panel.

Chart Properties

General

Customize the chart’s placement, dimensions, and basic behaviors.

• Component Name: Auto-generated identifier (e.g., area1). You can rename it.

• Left & Top: Position of the chart on the canvas.

• Height & Width: Dimensions of the chart.

• Initial Visibility: Show or hide the chart when the dashboard loads.

• Max Button: Allow users to expand the chart to full view.

• Color From Drill: Apply colors based on drilled data points.

• Points: Display data points on the chart line.

• Line Form: Choose line style: Segment or Curve.

• Chart Type: Select between Overlaid, Stacked, or Laid.

Background

Enhance the chart with gradients, borders, and shadows.

• Gradient Rotation: Adjust the angle of the gradient fill.

• Opacity: Control transparency of the chart background.

• Gradient Colors:

  • Click Gradient icon to open the Background gradient colors dialog.

  • Use Add Color to insert additional shades.

  • Click Save to apply changes.

• Border: Enable and customize border color, radius, and style.

• Shadow: Apply shadows with custom color and transparency for depth.

Tooltip

Enable interactive tooltips to show additional information on hover.

• Show Tool Tip: Turn on tooltips for chart series.

• Configuration:

  • Default formatter (check the box to enable).

  • Customize background color, opacity, border, font size, and box width.

  • Adjust precision for numeric values.

  • Toggle Highlighter to emphasize data points.

Note: To use custom tooltip formatting, see Tooltip (Default & Custom).

Title

Control the appearance of chart titles.

• Show Title / Show Title Box: Toggle visibility.

• Title Box Color: Set background color for the title.

• Text Options: Customize description, font size, color, family, weight (Normal, Bold, 300–900), alignment, and decoration.

• Show Dataset Description: Automatically display the dataset description as the title.

Subtitle

Similar to title settings, but applied to the subtitle text.

X-Axis and Y-Axis

Control axis styling, labeling, and descriptions.

• Toggle visibility of axis lines.

• Customize line color, font properties (size, style, weight, decoration).

• Rotate or tilt labels for readability.

• Add descriptions, tick marks, and dataset descriptions.

• Configure min/max values, marker lines, and zero-baselines.

Legend

• Show Legend: Toggle visibility.

• Customize font styling (color, size, family, weight, style).

• Hide on Load: Keep legend hidden until user expands.

Formatter

• Unit: Append units to values.

• Precision: Define decimal places.

• Currency: Format numbers with currency symbols.

• Position: Place formatted values before or after numbers.

• Number Formatter: Choose Indian or International notation.

Export Options

Enable users to export chart data and visuals.

• Context Menu: Right-click menu in preview mode.

• Supported formats: Excel (.xlsx), CSV (.csv), JPEG (.jpg), PNG (.png), PPTX (.pptx), PDF (.pdf).

• Print Option: Print directly from dashboard.

• Custom Export Settings: Add heading, sub-heading, file name, and define global export type (Screenshot or Tabular).

Dataset Series Properties

Configure how data series are displayed:

• Change series colors.

• Select line type: Dot, Dot-Dash, Straight, or Dash.

• Adjust line width, point shape, point radius.

• Use Display Name to show custom names in the dashboard.

• Enable Data Label to display values for each category/year.

9KB

Sample Data_Area chart.xlsx

Open

Note:

• Category fields can be numeric, string, or date.

• Series fields must be numeric.