All Components

Area

Area Charts and Vertical Area Charts are Categorical charts which are suitable for displaying quantitative data by using continuous lines.

The lines of the Area Charts pass through points that are 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 which come 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.

Vertical Area Charts are functionally equivalent to Area Charts, but transpose the axes—the category axis is vertical and the value axis is horizontal.

Basic Usage

The following example demonstrates the Area Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-title text="Units sold"></kendo-chart-title>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item
              [categories]="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']"
              [title]="{ text: 'Months' }">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-series>
        <kendo-chart-series-item type="area" [data]="[123, 276, 310, 212, 240, 156, 98]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[165, 210, 287, 144, 190, 167, 212]">
        </kendo-chart-series-item>
        <kendo-chart-series-item type="area" [data]="[56, 140, 195, 46, 123, 78, 95]">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent { }

The following example demonstrates the Vertical Area Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item
              [categories]="['Jan', 'Feb', 'Mar', 'Apr']">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <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>
  `
})
export class AppComponent { }

Data Binding

You can bind the Area series to an array that contains:

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

When the Area series is bound to objects (models), it is your responsibility 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.

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 Area Charts feature the following sub-types:

Stacked Area Charts

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. The setting of the stack property is applied to all series and you do not have to set the rest of the series explicitly.

The following example demonstrates how to stack the red and green series 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 {
}

100% Stacked Area Charts

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. The setting of the stack property is applied to all series and you do not have to set the rest of the series explicitly.

While it is possible to plot negative values in a 100% Stacked Chart, the results are hard for the user to interpret.

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

@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 {
}

Line Style

Area Charts enable you to render the lines between the points in different styles. To set the appearance of the lines, use the line.style option which provides the following available styles:

  • Normal—The default style which produces a straight line between data points.
  • Step—The style renders the connection between the data points through vertical and horizontal lines. It is suitable for indicating that the value is constant between the changes.
  • Smooth—The style causes the Area Chart to display a fitted curve through data points. It is suitable displaying data with a curve and for connecting the points with smooth instead of straight lines.

The following example demonstrates how to use the different types of lines.

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="['normal', 'step', 'smooth']" [(ngModel)]="style">
    </kendo-dropdownlist>
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item [line]="{ style: style }" type="area"
            [data]="[20, 1, 18, 3, 15, 5, 10, 6, 9, 6, 10, 5, 13, 3, 16, 1, 19, 1, 20, 2, 18, 5, 12, 7, 10, 8]"
            [markers]="{ visible: false }">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
  `
})
export class AppComponent {
    public style: string = 'normal';
}
In this article