Chart Elements Overview
The Angular Charts Components consist of several structural elements that you can configure and customize separately to create rich, interactive data visualizations.
All Chart elements have default styles that depend on the used component theme. You can override these defaults by applying custom configurations through dedicated components and properties.
Chart Structure Elements
The main structural elements define the overall layout and organization of the Chart:
-
Chart Area—The main container that holds all Chart elements including the plot area, series, axes, title, and legend. Configure background color, borders, margins, and overall Chart dimensions through the Chart Area settings.
-
Chart Title—Displays the main title and optional subtitle at the top of the Chart. The title provides context about the data being visualized and supports customizable text, font, alignment, and positioning.
-
Plot Area—The rectangular region where the series data is rendered along with the axes. The plot area contains the actual data visualization, grid lines, and axis elements. You can customize its background, borders, and margins independently from the Chart Area.
-
Panes—Vertical sub-divisions within categorical charts that enable you to split the Chart into multiple sections. Each pane can have its own value axis while sharing a common category axis, which is useful for comparing series with different value ranges.
-
Legend—Displays series names (or category names for Pie, Donut, Funnel, and Pyramid charts) with color indicators. The legend helps users identify different data series and supports interactive features like clicking to toggle series visibility. You can control its position (top, bottom, left, right, or custom), orientation, and visual styling.
Data Visualization Elements
These elements represent and annotate your data:
-
Series—The core data visualizations defined by their type (Line, Area, Bar, Column, Scatter, Pie, and so on). Series transform data points into visual representations like lines, bars, or markers. The Chart supports multiple series types including categorical, scatter, circular, and freeform series.
-
Markers—Visual indicators that represent individual data points in Line, Area, Scatter, Radar, and Polar series. Markers can be customized with different shapes (circle, square, triangle, cross, rect, roundedRect), sizes, colors, borders, and rotation angles. You can also create custom marker shapes using the Drawing API.
-
Labels—Text elements that display data values next to series points or along axes. Series labels show point values with customizable formatting, while axis labels display category names or numeric values. Labels support custom templates, formatting strings, rotation, and styling options.
-
Tooltips —Interactive popups that appear when hovering over data points, displaying detailed information about the hovered point or category. The Chart supports series-level tooltips (for individual points), shared tooltips (for all series in a category), and crosshair tooltips. Tooltips can be customized with templates, format strings, and visual styling.
Axis Elements
Axes provide the measurement framework for your data:
-
Axes—Define the scale and reference points for plotted data. Categorical charts use category and value axes, scatter charts use X and Y axes, while circular charts (Pie, Donut, Funnel, Pyramid) do not use axes. Each axis type supports extensive configuration including ranges, labels, titles, grid lines, plot bands, and crosshairs. The Chart supports multiple axes, logarithmic scaling, date-based axes with automatic aggregation, and flexible axis positioning.
-
Axis Ticks—Small marks along the axis that indicate value divisions and serve as starting points for grid lines. You can configure tick spacing, size, color, and visibility through the axis configuration.
-
Grid Lines—Lines perpendicular to axes that aid in reading values accurately. Grid lines come in two types: major grid lines (typically thicker and more widely spaced) and minor grid lines (thinner and more closely spaced). Both types support customization of color, width, dash type, and visibility.
-
Axis Labels—Text that displays category names (for category axes) or numeric values (for value axes) at regular intervals along the axis. Labels support formatting, rotation, templates, and positioning options.
-
Axis Titles—Descriptive text that explains what the axis represents or the unit of measurement being used. Titles can be positioned and styled independently.
Annotation and Interaction Elements
These elements add context and interactivity to your charts:
-
Crosshairs—Perpendicular lines that follow the cursor position and help users identify exact values at the current point. Crosshairs can be enabled for both category and value axes (or X and Y axes for scatter charts) and include tooltips that display the values at the cursor position.
-
Notes—Annotations that display additional metadata for specific series points or axis positions. Notes consist of an icon (customizable shape and color) and a label containing the note text. You can attach notes to series points by specifying a note text field in your data, or place notes at specific positions along axes.
-
Plot Bands—Colored rectangular regions that highlight specific value ranges on axes. Plot bands help emphasize important thresholds, target ranges, or zones of interest in your data. They support labels, custom styling, and can be configured for any axis type.
-
Error Bars—Visual indicators that show the variability or uncertainty in data measurements. Error bars extend from data points to represent margins of error, standard deviations, or confidence intervals. They can be configured with different value types and visual styles.
-
Selection—Interactive feature that allows users to select ranges on axes or specific data points. Selection enables zooming, filtering, or triggering custom actions based on user interactions with the Chart.
-
Series Highlight—Visual feedback that emphasizes series or data points when users hover over or interact with them. Highlighting helps users focus on specific data while maintaining context of the complete dataset.