All Components

Series Types

The Chart supports the visualizing of data series as different types of charts.

The chart types can be placed in a number of broad categories.

Categorical

Categorical charts have built-in support for displaying dates and are also referred to as discrete in the sense that categories are unique values that bear no mathematical relationship to each other. For example, it is not possible to compare Cat and Dog and there are no means of finding a third category that lies midway between them.

Area, VerticalArea

Area charts are suitable for displaying quantitative data by using continuous lines passing through points defined by the values of their items. The portion of the graph beneath the lines is filled with a particular color for each series. The different colors in an Area Chart are useful for emphasizing changes in values coming from several sets of similar data.

The series are overlaid on top of each other either fully or with partial opacity. The stacking order is either implicit or controlled through an user-set zIndex.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="area" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[-1, -2, -3, -5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

The VerticalArea chart is functionally equivalent, but it transposes the axes and makes the category axis vertical and the value axis horizontal.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="verticalArea" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="verticalArea" [data]="[-1, -2, -3, -5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Data Binding

It is possible to bind the Area series to an array that contains:

  • Numbers.
  • Arrays, representing [value, category] tuples.
  • Objects, also referred to as models.

For more information on how to configure each mode, refer to the article on data binding.

When the Area series is bound to models, it is the responsibility of the developer to select the relevant fields through the available bindings:

MODEL BINDING DATA TYPE REQUIRED DESCRIPTION
field number/null Yes The value of the data point, if any.
categoryField string/date/number/null No The category of the data point, if any.

Sub-Type: Stacked Area Chart

Stacked area charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set the stack property of the first series item to true. It is not necessary to set it to the rest of the series because the stack setting is applied to all series.

The example below demonstrates how the red and green series are stacked on top of each other. The blue series contains positive and zero values as well as a negative one. In all cases, the plotted value is the sum of all values up to the current series.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="area" [stack]="true" [data]="[1, 1, 1]" color="red" opacity="0.5">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[1, 1, 1]" color="green" opacity="0.5">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[1, 0, -1]" color="blue" opacity="0.5">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Sub-Type: 100% Stacked Area Chart

100% Stacked area charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, set the stack property of the first series item to a { type: '100%' } object. It is not necessary to set it to the rest of the series because the stack setting is applied to all series.

The example below demonstrates how the series data is converted into percentages.

While it is possible to plot negative values in a 100% Stacked chart, the results will be hard to interpret.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="area" [stack]="{ type: '100%' }" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[5, 3, 2, 1]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Bar, Column

Bar charts display data by using horizontal or vertical bars whose lengths vary according to their value. Bar Charts are suitable for displaying a comparison between several sets of data. For example, for showing a summary of unique and total site visitors over a certain period of time. The series are placed next to each other with predefined spacing between them.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[-1, -2, -3, -5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

The Column chart is functionally equivalent, but transposes the axes and makes the category axis vertical and the value axis horizontal.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="column" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="column" [data]="[-1, -2, -3, -5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Data Binding

It is possible to bind the Bar series to an array that contains:

  • Numbers.
  • Arrays, representing [value, category] tuples.
  • Objects, also referred to as models.

For more information on how to configure each mode, refer to the article on data binding.

When the Bar series is bound to models, the user selects the relevant fields through the available bindings:

MODEL BINDING DATA TYPE REQUIRED DESCRIPTION
field number/null Yes The value of the data point, if any.
categoryField string/date/number/null No The category of the data point, if any.
colorField string No The color of the data point, if overridden.

Gap and Spacing

The distance between bars is controlled by two variables—gap and spacing. The distance between categories is controlled by setting gap as a percentage of the bar width. Setting it to the first series is sufficient and will apply to all series.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [gap]="2" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

The distance between bars in a single category is controlled by setting spacing as a percentage of the bar width. Setting it to the first series is sufficient and will apply to all series.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [spacing]="0" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Sub-Type: Stacked Bar Charts

Stacked bar charts are suitable for indicating the proportion of individual values to the total. To select this series sub-type, set the stack property of the first series item to true. Setting it to the rest of the series is optional. The stacking options of the first series will be used as a default value for all series. They can still be overridden per series.

Series are plotted on top of each other. The stack value is the sum of all values up until the current series. Negative values are placed on a separate stack.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="true" [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, -1, 1]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

It is also possible to place groups of series on separate stacks.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="{ group: 'a' }" [data]="[1, 2, 3]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, 1, 1]" [stack]="{ group: 'a' }">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, 1, 1]" [stack]="{ group: 'b' }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Sub-Type: 100% Stacked Bar

100% Stacked bar charts are suitable for indicating the proportion of individual values as a percentage of the total. To select this series sub-type, set the stack property of the first series item to a { type: '100%' } object. Setting it to the rest of the series is optional and will default to the setting on the first series.

The example below demonstrates how the series data is converted into percentages.

While it is possible to plot negative values in a 100% Stacked chart, the results will be hard to interpret.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item type="bar" [stack]="{ type: '100%' }" [data]="[1, 2, 3, 5]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="bar" [data]="[1, 1, 1, 1]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
}

Box Plot

Box Plot Charts graphically render groups of numerical data through their quartiles.

Bullet

Bullet Charts are a variation of the Kendo UI Bar Charts. It is possible to use them as a replacement for dashboard gauges and meters. The bullet graph compares a given quantitative measure, such as temperature, against qualitative ranges, such as warm, hot, mild, cool, chilly, cold, and other, and a symbol marker that encodes the comparative measure, such as the max temperature a year ago.

Line, VerticalLine

Line Charts display data in the form of continuous lines that pass through points defined by the values of their items. They are useful for rendering a trend over time and comparing several sets of similar data.

Radar

Radar Charts display multi-various data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The relative position and angle of the axes is typically uninformative.

RangeBar

RangeBar Charts are yet another variation of the Kendo UI Bar Charts. They display data as bars where each bar represents a value range that spans between its minimum and maximum levels. A RangeBar Chart type has floating bars unlike the standard Kendo UI Bar Chart that has anchored bars to its x-axis.

Waterfall

Waterfall Charts display the cumulative effect of sequentially introduced positive or negative values.

Scatter

Scatter Charts show data as points defined by the values of their items. They are useful for displaying the relation between different sets of data, such as scientific experimental results, and plotting two-dimensional data.

ScatterLine

ScatterLine Charts are suitable for displaying numerical data.

ScatterArea

ScatterArea Charts combine Scatter and Area Charts to fill the area under or between the plotted lines.

Bubble

Bubble Charts display data as points with coordinates and sizes defined by the value of their items. They are similar to the Kendo UI Scatter Charts, in which the data points are replaced with bubbles. This allows a Bubble Chart to display three-dimensional data—two values for the coordinates of the item and one for their size.

A Bubble Chart is useful for visualizing different scientific relationships such as economic or social relations. The x-axis of the Bubble Charts is numerical and does not require items. Bubble Charts are also suited for displaying dozens to hundreds of values. They come in handy especially when you wish to visualize size values, differing by several orders of magnitude. As the size value is represented by a circle area, it is a best practice to plot positive values.

Polar

Polar Charts display multi-various data in a two-dimensional form of more than three variables represented on axes starting from the same point.

Circular

Pie

Pie Charts display data in the form of single-series sectors from a two-dimensional circle. They are useful for rendering data as a part of the whole.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [seriesColors]="['#ffe', 'orange']">
      <kendo-chart-legend position="top"></kendo-chart-legend>
      <kendo-chart-series>
        <kendo-chart-series-item type="pie"
          [data]="pieData"
          field="value"
          categoryField="category">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
class AppComponent {
  private pieData: any = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }
  ]
}

Data Binding

It is possible to bind the Pie series to an array that contains:

  • Numbers.
  • Arrays, representing [value, category] tuples.
  • Objects, also referred to as models.

For more information on how to configure each mode, refer to the article on data binding.

When the Pie series is bound to models, the user selects the relevant fields through the available bindings:

MODEL BINDING DATA TYPE REQUIRED DESCRIPTION
field number/null Yes The value of the data point, if any.
categoryField string/date/number/null No The category of the data point, if any.
colorField string No The color of the data point, if overridden.

Donut

Donut Charts are a variation of the Kendo UI Pie Charts with the same ability to display a single data series in a two-dimensional circle. They are likewise useful for displaying data as a part of the whole.

Freeform

Funnel

Funnel Charts display a single series of data in progressively decreasing or increasing proportions, organized in segments, where each segment represents the value for the particular item from the series. The values of the items can also influence the height and the shape of the corresponding segments.

The Kendo UI Funnel Chart is useful for representing stages in a sales process and for displaying the amount of potential revenue from each stage. It is also useful when identifying potential problem areas in the sales processes of an organization and when displaying several values.

In this article