Angular Combination Charts
Combination charts let you visualize multiple related metrics in a single chart. Use them when different data series need different visual representations. For example, combine revenue (columns) with profit margin (line), or sales (bars) with targets (area).
Use combination charts when:
- Comparing values with trends
- Displaying metrics with different units
- Highlighting relationships between business KPIs
Series Type Compatibility
These series cannot be combined: Donut (only with itself), Bubble, and Pie.
| Series types | When to use | Demo |
|---|---|---|
| Column + Line | Discrete values alongside a trend. Compare values and trends—like monthly sales (columns) with growth rate (line). | See more |
| Column + Area | Values against goals or targets. Compare values with targets—like actual revenue (columns) against budget or goals (area). | See more |
| Bar + Line | Categories with trends (long labels). Compare categories with trends—use when category names are long and you need horizontal space. | See more |
| Bar + Area | Distribution and targets in horizontal layout. Show category distribution and targets together in horizontal format. | See more |
| Line + Area | Volume and its drivers or influencers. Show volume plus another correlated metric—like energy consumption (area) alongside temperature (line). | See more |
| Column + Line + Area | Multiple KPIs and financial dimensions. Track multiple KPIs in one view: revenue, profit, and margin. See the complete financial picture at a glance. | See more |
| Scatter + Scatter Line | Correlations, outliers, and trend lines. Visualize correlations and predict outcomes—like property size vs. sale price with a trend line. | See more |
Column Chart Combinations
When your data organizes by time periods or categories, you often need to show both discrete values and how they trend together. Column combinations solve this by layering values (columns) with performance trends (line) or targets (area) on the same categorical axis.
Declare the Column series first in
<kendo-chart-series>to establish the categorical layout. All Line and Area series will automatically follow the same category axis.
The following example shows a Column + Line combination (revenue against order volume on separate axes) and a Column + Area combination (current year against prior year revenue on a shared axis).
Common use cases:
- Volume vs. Performance: See sales (columns) with conversion rate or profit (line).
- Metric + Target: Track performance (columns) vs. goal or benchmark (line).
- Primary + Secondary: Combine volume metrics (columns + line) with percentage metric (area).
Bar Chart Combinations
Long category names force truncation in vertical charts. Bar combinations eliminate this problem by switching to horizontal orientation, giving categories the space they need while still layering multiple metrics alongside.
Declare the Bar series first in
<kendo-chart-series>to set horizontal orientation. All Line and Area series will respect the horizontal layout.
The following example shows a Bar + Line combination (category sales with profit margin on a secondary axis) and a Bar + Area combination (category orders with return rate on a secondary axis).
Common use cases:
- Category Comparison: Compare sales, profit, and efficiency across categories without truncating labels.
- Regional Analysis: View regional revenue (bars) with growth trend (line) or market share (area).
- Department Performance: Track department output (bars) with spend (line) and efficiency (area).
Area and Line Chart Combination
When one metric drives another, an Area + Line combination reveals the cause-and-effect relationship. For example, temperature influences energy consumption, or marketing spend affects traffic. The area shows volume. The line shows the driver. Declare Area first, then Line.
The following example demonstrates an Area + Line combination that compares energy consumption (area) with average temperature (line) on secondary axes.
Common use cases:
- Volume + Drivers: Track website traffic (area) with marketing spend or seasonal factors (line).
- Consumption + Context: Show production volume (area) vs. raw material cost (line).
- Resource Utilization: Visualize server load (area) vs. response time (line).
Scatter Chart Combinations
Find correlations between two continuous variables—like property size and price—by combining individual data points with a trend line. Scatter plots show the raw data points. Scatter lines run through them to reveal correlations at a glance.
Both axes are numeric. Declare Scatter first, then ScatterLine on the same XY axes.
The following example plots property sales (scatter) with a price trend line (scatter line) overlaid, revealing the relationship between property size and price.
Common use cases:
- Correlation Analysis: Plot sales transactions (scatter) with a trend line to identify price or value correlations.
- Prediction & Forecasting: Overlay a trend line on raw data to project future values.
- Outlier Detection: Spot anomalies—transactions far from the trend line.
Combining Three or More Series Types
Decision-making often requires seeing multiple KPIs at once: revenue, profitability, and margins all in a single view. Three or more series in one chart compress this analysis into a dashboard without sacrificing clarity. The challenge is assigning each metric to the right axis based on its units.
Declare Column (categorical) or Bar (horizontal) first to establish layout. Assign metrics to the right axes based on units.
The following example combines Column (revenue), Line (profit), and Area (gross margin). Revenue and profit share the primary axis (same unit). Margin uses a secondary axis (percentage).
Axis Configuration
Decide whether metrics will share an axis based on whether they measure the same units.
Shared Axis: Same Metric Unit
Place metrics that measure the same unit on a shared axis for direct comparison. Both series will automatically align without additional axis configuration.
Declare Column first to establish categorical layout.
Separate Axes: Different Units or Scales
Use separate axes when metrics measure different units to prevent scaling distortion. Declare Column first, then assign the secondary metric to a named axis using the axis property on the series. To position the secondary axis on the right side of the chart, set axisCrossingValue on the category axis to [0, N], where N is the number of categories—this pushes the second value axis to the far end of the category axis.
For the full multi-axis configuration API—including axis naming, label formatting, and positioning—see Axes.
This example shows website sessions (left axis) alongside conversion rate (right axis).
Support and Learning Resources
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Charts
- Series Types Overview
- Axes
- Area Charts
- Bar and Column Charts
- Line Charts
- Scatter Charts
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses