Line
Line charts are categorical charts which display continuous data as lines that pass through points defined by the values of their items.
Basic Usage
The following example demonstrates the Line chart in action.
Data Binding
You can bind the Line series to an array that contains:
- Numbers.
- Arrays which represent
[value, category]
tuples. - Objects which are also referred to as models.
For more information on how to configure each data-binding mode, refer to the article on binding the Kendo UI Chart to data.
Sub-Types
The Line Charts feature the following sub-types:
Stacked Line Charts
Stacked Line charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set series-defaults-stack
to true
. You can also divide the Line chart series in two parts, by setting missingValues
to gap
and having null
data-value entries in the series data which will be used as a divider. For more information, refer to the SeriesDefaults
option.
100% Stacked Line Charts
100% stacked Line charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, set series-defaults-stack-type
.
While it is possible to plot negative values in a 100% Stacked Chart, the results are hard for the user to interpret.
Stepped Line Charts
The stepped Line chart is a form of Line chart where each data point from the series is connected with vertical and horizontal lines to form a step-like progression. This type of line visualization is useful for highlighting the increase or decrease in values over time. To configure the stepped Line chart, set the k-style
setting of the series
.
Smooth Line Charts
In the smooth Line chart each data point from the series is connected with a curved line which represents a rough approximation of the missing data points. To configure the smooth Line chart, set the k-style
configuration of the series
.
Functionality and Features
The Line charts provide options for setting their notes.
Notes
The following example demonstrates how to add notes for the min
and max
values of the Line chart by setting the notes
configuration of the series
. The setting of the noteTextField
option will also allow you to specify the note and its label position.