Axes
The Chart axes provide a value scale for the plotted data series.
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
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-item
orkendo-chart-category-axis-item
components to their respective container, or - Providing an array of axis options for the
valueAxis
orcategoryAxis
inputs.
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.
To configure the position of the axes as relative to one another, use the axisCrossingValue
option of the axes.
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
position
is 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
position
is 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.
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"
.
Selecting Time Intervals
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.
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.
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.
You can save space and rotate the labels at a fixed or at an optimal ("auto"
) angle by using the labels.rotation
option.
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
X axes are declared through the kendo-chart-x-axis-item configuration components and placed in a kendo-chart-x-axis collection.
Y axes are declared through the kendo-chart-y-axis-item configuration components and placed in a kendo-chart-y-axis collection.
Scatter Chart Axes Configuration
The following example demonstrates how to configure the X and Y axes of the Scatter Chart.
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [title]="{ text: 'Rainfall' }">
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-y-axis>
<kendo-chart-y-axis-item [title]="{ text: 'Windspeed' }">
</kendo-chart-y-axis-item>
</kendo-chart-y-axis>
<kendo-chart-series>
<kendo-chart-series-item [data]="seriesData" type="scatter">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`
})
export class AppComponent {
public seriesData: number[][] = [
[16.4, 5.4], [21.7, 2], [25.4, 3], [19, 2], [10.9, 1],
[13.6, 3.2], [10.9, 7.4], [10.9, 0], [10.9, 8.2], [16.4, 0]
];
}
Multiple Scatter Chart Axes
The Angular Chart enables you to render multiple axes either by:
- Adding multiple
kendo-chart-x-axis-item
orkendo-chart-y-axis-item
components to their respective container, or - Providing an array of axis options for the
xAxis
oryAxis
inputs.
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.
To configure the position of the axes as relative to one another, use the axisCrossingValue
option of the axes.
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
position
is 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
position
is 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.
Displaying Dates
Using the X and Y Axes
The following example demonstrates how to use the X and Y axes of the Chart to display dates.
Selecting Time Intervals
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
baseUnit
setting 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.
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 of the ValueAxisItemComponent
to log
.
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)
- Virtual Classroom (Training Courses for Registered Users)
- Chart Forum
- Before You Start: All Things Angular (Telerik Blog Post)
- Knowledge Base