Angular Chart Component Overview
18 Nov 20188 minutes to read
The EJ2 Chart component is a high-performance, interactive visualization library for presenting data across a broad set of chart types. It supports line, bar, area, column, pie, financial, spline and other series formats, and is optimized for responsive rendering, smooth interactions, and large datasets. Typical use cases include trend analysis, comparisons, distributions, and time-series exploration.
Key features of Chart Component are as follows:
-
Title & Subtitle:
- Title: Displays a clear heading summarizing the purpose of the chart.
- Subtitle: Offers optional supporting context below the main title.
- Axis: Configures the X and Y axes, including labels, intervals, gridlines, and formatting options for accurate mapping of data.
- Series: Represents collections of data points rendered as line, bar, area, column, or other series types for comparison and analysis.
| Series Type Modules | Description |
|---|---|
| Line Series Modules | |
| Line | Classic continuous line chart for visualizing trends over time or ordered categories. |
| Step Line | Connects points with horizontal and vertical segments to emphasize discrete changes between values. |
| Spline | Smoothed line rendering using splines for a polished, curved trend visualization. |
| Stacked Line | Stacks multiple line series to show cumulative contributions across categories. |
| Multi-colored Line | Applies different colors to line segments based on value ranges or conditions for emphasis. |
| Area Series Modules | |
| Area | Filled area beneath a line to show magnitude and emphasize volume over a range. |
| Stacked Area | Stacks multiple area series to visualize part-to-whole contributions over the same axis. |
| 100% Stacked Area | Normalizes stacked areas to 100% to compare relative proportions across categories. |
| Range Area | Displays min-max ranges per x-value, useful for variability or confidence bands. |
| Spline Range Area | Smooth (spline) version of range area for visually refined min-max presentation. |
| Column & Bar Series Modules | |
| Column | Vertical bars for straightforward comparison of categorical values. |
| Bar | Horizontal bars ideal for long category labels or ranking lists. |
| Stacked Column/Bar | Combines multiple series within a single column/bar to show component contributions. |
| 100% Stacked Column/Bar | Displays proportional composition of each column/bar scaled to 100%. |
| Range Column | Renders high-low (min-max) values per category as columns (useful for ranges). |
| Financial Series Modules | |
| Candlestick | Standard OHLC (open/high/low/close) bars with color coding to show price movement direction. |
| Hilo | Shows only high and low values per period for a compact volatility view. |
| HiloOpenClose | Full OHLC representation including open and close markers for detailed financial analysis. |
| Technical Indicator Modules | |
| Technical indicators overview | See available indicators (RSI, MACD, Bollinger Bands, EMA, SMA, ATR, Momentum, Stochastic, TMA, Accumulation Distribution) and usage examples. |
| Statistical Series Modules | |
| Box & Whisker | Visualizes distribution with median, quartiles and outliers for statistical comparison. |
| Histogram | Displays frequency distribution of numeric data bins to reveal distribution shape. |
| Pareto | Bar plus cumulative line for 80/20 analysis—ranks factors by importance and shows cumulative impact. |
| Error Bar | Adds error/uncertainty ranges to points (± values) to convey variation or measurement error. |
| Specialized Series Modules | |
| Scatter | Plots individual x/y points to reveal correlation, clusters or outliers between two variables. |
| Bubble | Scatter variant where point size encodes a third numeric dimension (size-encoded values). |
| Polar & Radar | Circular multi-axis charts for comparing multivariate data around a central point. |
| Waterfall | Shows sequential positive/negative contributions to illustrate cumulative totals or reconciliations. |
| Vertical Chart | Inverted orientation for charts (rotated axes) to improve readability for certain datasets. |
- Legend: Provides a list of series names along with their corresponding colors and symbols, which helps to identify multiple datasets.
- Marker: Uses symbols to denote individual data points for visibility.
- Data label: Displays data point values directly on or near chart elements, enhancing readability.
- Zooming: Enables to closely inspect chart data by zooming in through selection, mouse wheel, or pinch gestures, and navigate with tools like zoom-in, zoom-out, pan, and reset.
- Tooltip: Shows precise values and related data when hovering over or focusing a data point—helping users access details without cluttering the chart.
- Crosshair and trackball: Crosshair shows vertical and horizontal lines to precisely read axis values at the mouse or touch position. Trackball highlights the nearest data point with a marker and displays its details in a tooltip.
- Annotation: Allows placement of custom text, shapes, or images at specific coordinates to highlight insights.
- Trendline: Adds fitted lines (such as linear, exponential, or moving average) to illustrate overall patterns or directional trends in the data.
- Multilevel label: Supports hierarchical labeling on the axis, allowing grouped or tiered categories for clearer categorization.
- Stripline: Highlights specific axis ranges with bands and labels to emphasize thresholds or important periods.
- Synchronization: Ensures multiple charts stay aligned by sharing actions like zooming, panning, or cursor movement.
- Selection: Enables users to highlight individual points, series, or specific region. This includes point selection, series selection, and drag-based selection depending on configuration.
- Export and print: Provides options to export the chart to PDF, SVG, PNG, JPEG, CSV, and XLSX formats, and to print the chart.
- Accessibility: Visually presents data while offering accessibility customization that improves usability for individuals with disabilities.
- Internationalization: Enables charts to adapt to different languages, number formats, date formats, and cultural settings so users across regions can view data in a locally familiar and meaningful way.
- Localization: Customizes the chart’s text—such as labels, tooltips, legends, and messages—to the user’s language so the interface feels native to different regions.