Axes
The Kendo UI for Vue Native Chart axes provide a value scale for the plotted data series.
Depending on the series types you use, 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 ChartCategoryAxisItem configuration components and placed in a ChartCategoryAxis collection. For more information on the available data-binding options, refer to the section on binding categories.
Value axes are declared through the ChartValueAxisItem configuration components and placed in a ChartValueAxis collection.
The following example demonstrates how to configure the Value and Category axes of the category Chart.
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:
- Automatic selection for the duration of the category time slots (minutes, hours, days, and so on)
- Aggregated series values for each time slot
- Label formatting that matches the time slot duration
To disable the Category axis features for displaying time series, set the axis mode to
"category".
Selecting Time Intervals
Set the Category Chart to display time series, and the Category axis divides into time slots. Define a "base unit," such as hours, days, or weeks, to set the time scale for these slots. 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
Set the Category Chart to display time series, and it processes the data points for each time slot, producing a new point 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 ChartXAxisItem configuration components and placed in a ChartXAxis collection.
Y axes are declared through the ChartYAxisItem configuration components and placed in a ChartYAxis collection.
The following example demonstrates how to configure the X and Y axes of the Scatter Chart.
Displaying Dates
The Scatter Chart provides option for:
Selecting Time Intervals
Set the Scatter Chart to display time series, and its axis divides into time slots. Define a "base unit," such as hours, days, or weeks, to set the time scale for these slots.
You can use the baseUnit setting to manually select a different time unit. To display every Nth 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.
Default Axis Configuration
You can also apply settings to all Chart axes, regardless of their kind, by using the ChartAxisDefaults component.
The ChartAxisDefaults component supports the following child components:
The following example demonstrates how to set the default axis color and label font.
Multiple Value Axis
The Kendo UI for Vue Chart supports multiple axis. This helps you leverage the best charting performance and visualize data on any number of axis to provide solid business reports for your users.
The example illustrates a weather report and includes information for the: max and min temperatures, wind speed and rainfall in mm. Note that each of them has a unique name which is set through the name property. You can also populate the axisCrossingValue array to specify the alignment of the value axes.
