Axes
Chart axes provide the foundation for data visualization by establishing scales and reference points for your plotted data. They define how data values are mapped to visual positions and provide labels to help users interpret the information.
Depending on the series types of your project, the Chart delivers:
- A pair of category and value axes (in Categorical and Radar series).
- A pair of X and Y axes (in Scatter and Polar series).
- No axes (in Pie, Funnel and Pyramid series).
Categorical Chart Axes
Category axes are declared through the kendo-chart-category-axis-item configuration components and placed in a kendo-chart-category-axis collection. For more information on the available data-binding options, refer to the section on binding categories.
Value axes are declared through the kendo-chart-value-axis-item configuration components and placed in a kendo-chart-value-axis collection.
Categorical Chart Axes Configuration
To configure categorical chart axes, you need to set up both the value axis (for numeric data) and category axis (for labels). The value axis defines the scale and range for your data, while the category axis provides the labels for each data point.
The following example demonstrates how to configure the value and category axes of the category Chart.
Multiple Categorical Chart Axes
The Angular Chart enables you to render multiple axes by either:
- Adding multiple
kendo-chart-value-axis-itemorkendo-chart-category-axis-itemcomponents to their respective container, or - Providing an array of axis options for the
valueAxisorcategoryAxisinputs.
To associate a series with a particular value axis, set the name of the axis to the axis option of the series. To specify the category axis, which the series will use, set the name of the axis to the categoryAxis option of the series. If you do not specify the axes, the series will use the first value and category axes.
For information on positioning axes relative to one another, refer to the Axis Positioning section.
The following example demonstrates multiple axes for the Category Chart.
Label Position of the Categorical Chart Axes
The category and value axes provide options for displaying their labels either next to the axis or at the outer edges of the plot area. By default, the labels are positioned next to the axis.
To change the label position, set the position option of the axis labels:
- When
positionis set toend, the labels are placed at the end of the crossing axis. Typically, this configuration positions the labels at the top or right end of the Chart unless the crossing axis was reversed. - When
positionis set tostart, the labels are placed at the start of the crossing axis. Typically, this configuration positions the labels at the left or bottom end of the Chart unless the crossing axis was reversed.
The following example demonstrates different label positions for the Category Chart axes.
Displaying Time Series
The Category axis delivers the following dedicated features, which are tailored for displaying time series and get automatically activated when the axis is bound to Date objects:
To disable the Category axis features for displaying time series, set the axis mode to
"category".
The following example demonstrates how to configure the Category axis for time series data.
Selecting Time Intervals for Category Charts
When the Category Chart is set to display time series, the Category axis divides into time slots. To set the time scale for these slots, define a base unit, which can be hours, days, weeks, and so on. By default, the base unit matches the smallest time interval between the source dates. This approach ensures that all data points that are present in the original series will be displayed as they are.
You can use the baseUnit setting to manually select a different time unit. To display every Nth base unit, set the baseUnitStep option.
Setting the base unit to "fit", limits the total number of categories either to the set maxDateGroups value or, otherwise, to the default maxDateGroups value of 10.
The following example demonstrates how to configure the time scale of the Category Chart.
Aggregating Data
When the Category Chart is set to display time series, it processes the data points for each time slot and produces a new point by using an aggregate function.
By default, the aggregate function returns the maximum value of the value fields. If the category contains only one point, aggregate returns the point without modification. Other aggregates, such as count and sum, produce their own value even if the category contains only one data point.
The following example demonstrates different aggregate functions for the Category Chart.
Limiting the Number of Labels
Normally, each date interval gets its own label. Labels may overlap and become illegible in densely populated charts. To work around this issue, set an upper limit to the number of labels for display by using the maxDivisions option.
The following example demonstrates how to configure the maxDivisions option for the Category Chart.
You can save space and rotate the labels at a fixed or at an optimal ("auto") angle by using the labels.rotation option.
The following example demonstrates different label rotation options for the Category Chart.
Displaying the Axis Date Range
To display the exact start and end date of the axis range, set the rangeLabels.visible setting to true.
The range labels support the same settings as the axis labels. If an option is not set, it will default to the value set for the regular labels. For example rangeLabels.color defaults to the value of labels.color.
Toggle the range labels in the example below to see how they differ from the regular axis labels:
Scatter Chart Axes
Scatter charts use X and Y axes to plot data points in a two-dimensional coordinate system. Unlike categorical charts that use categories and values, scatter charts position data based on numeric coordinates on both axes, making them ideal for showing relationships between two continuous variables.
Both X and Y axes are declared through their respective kendo-chart-x-axis-item and kendo-chart-y-axis-item configuration components, which are placed in kendo-chart-x-axis and kendo-chart-y-axis collections respectively.
Scatter Chart Axes Configuration
To configure scatter chart axes, you need to set up both the X axis (horizontal positioning) and Y axis (vertical positioning). Both axes can be customized with ranges, labels, formatting, grid lines, and other visual elements to create clear and informative visualizations.
The following example demonstrates how to configure the X and Y axes of the Scatter Chart with comprehensive styling options including axis ranges, label formatting, and grid line customization.
Multiple Scatter Chart Axes
The Angular Chart enables you to render multiple axes either by:
- Adding multiple
kendo-chart-x-axis-itemorkendo-chart-y-axis-itemcomponents to their respective container, or - Providing an array of axis options for the
xAxisoryAxisinputs.
To associate a series with a particular X axis, set the name of the axis to the xAxis option of the series. To specify the Y axis, which the series will use, set the name of the axis to the yAxis option of the series. If you do not specify the axes, the series will use the first X and Y axes.
For information on positioning axes relative to one another, refer to the Axis Positioning section.
The following example demonstrates multiple axes for the Scatter Chart.
Label Position of the Scatter Chart Axes
The X and Y axes provide options for displaying their labels either next to the axis or at the outer edges of the plot area. By default, the labels are positioned next to the axis.
To change the label position, set the position option of the axis labels:
- When
positionis set toend, the labels are placed at the end of the crossing axis. Typically, this configuration positions the labels at the top or right end of the Chart unless the crossing axis was reversed. - When
positionis set tostart, the labels are placed at the start of the crossing axis. Typically, this configuration positions the labels at the left or bottom end of the Chart unless the crossing axis was reversed.
The following example demonstrates different label positions for the Scatter Chart axes.
Displaying Dates
Scatter charts can display date and time data on both X and Y axes. The chart automatically recognizes Date objects and provides specialized formatting and scaling options for time-based visualizations.
Using the X and Y Axes
Both X and Y axes can display date values effectively for time series data or temporal correlations. The chart handles date formatting and axis scaling automatically while allowing customization of time intervals through the baseUnit property.
The following example demonstrates how to use the X and Y axes of the Chart to display dates.
Selecting Time Intervals for Scatter Charts
When the Scatter Chart is set to display time series, its axis divides into time slots. To set the time scale for these slots, define a "base unit", which can be hours, days, weeks, and so on.
You can use the baseUnit setting to manually select a different time unit. To display every N-th base unit, set the baseUnitStep option.
The
baseUnitsetting for the Scatter Charts affects only the axis labels. This behavior contrasts the settings of the Categorical Chart axes that are used by the Chart to compute time series aggregates.
Axis Positioning
The axisCrossingValue property determines where axes intersect and controls their positioning on the chart. This is particularly useful when you have multiple axes and want to position them on different sides of the chart.
Here are some key points about the axisCrossingValue property:
- 0 or values below the range—positions the axis at the start edge (left for value axes, bottom for category axes).
- Large values above the range—positions the axis at the end edge (right for value axes, top for category axes).
- Values within the range—draws the axis through that specific point, useful for centering or custom positioning.
- For categorical charts—numbers are category indices where 0 is the first category.
- For scatter charts—numbers are actual coordinate values on the perpendicular axis.
- Arrays—when multiple perpendicular axes exist, each array item applies to the respective axis.
The following example demonstrates different axisCrossingValue configurations including positioning all axes on one side, splitting axes between left and right, and centering axes at specific crossing points.
Default Axis Configuration
You can also apply settings to all Chart axes, regardless of their kind, by using the kendo-chart-axis-defaults component.
The kendo-chart-axis-defaults component supports the following child components:
- kendo-chart-axis-defaults-crosshair
- kendo-chart-axis-defaults-labels
- kendo-chart-axis-defaults-title
The following example demonstrates how to configure the default axis settings.
Creating a Logarithmic Axis
The Angular Chart allows you to create a logarithmic axis to display data that varies over several orders of magnitude. To create a logarithmic axis, you can set the type property to log on value axes (for categorical charts) or on X and Y axes (for scatter charts) using kendo-chart-x-axis-item and kendo-chart-y-axis-item respectively.
Logarithmic axes are particularly useful when:
- Data spans multiple orders of magnitude (e.g., from thousands to billions).
- You need to visualize exponential relationships.
- Small values would be invisible on a linear scale.
The following example demonstrates how to create a logarithmic value axis for categorical charts, showing earthquake energy data across different magnitudes.
The following example demonstrates logarithmic axes for scatter charts using population versus GDP per person data, where both axes use logarithmic scaling to effectively display data spanning multiple orders of magnitude.
Support and Learning Resources
- Chart Axes Homepage
- Getting Started with the Kendo UI for Angular Chart
- API Reference of the Chart
- Chart Area
- Crosshairs
- Error Bars
- Labels
- Legend
- Notes
- Panes
- Plot Area
- Plot Bands
- Selection
- Series
- Title
- Tooltip
- Getting Started with Kendo UI for Angular (Online Guide)
- Getting Started with Kendo UI for Angular (Video Tutorial)
- Video Courses
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base