All Components

RangeArea

RangeArea Charts are Categorical charts which represent a variation of the Area Charts.

Unlike the Area Chart, which is filled to the axis, the Range Area chart is filled between its minimum and maximum values.

Basic Usage

The following example demonstrates the RangeArea Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Average Weather Conditions' }">
      <kendo-chart-series>
          <kendo-chart-series-item type="rangeArea"
            [data]="weatherData" fromField="min" toField="max" categoryField="month">
          <kendo-chart-series-item-labels-from [content]="labelContentFrom">
          </kendo-chart-series-item-labels-from>
          <kendo-chart-series-item-labels-to [content]="labelContentTo">
          </kendo-chart-series-item-labels-to>
        </kendo-chart-series-item>
      </kendo-chart-series>
      <kendo-chart-category-axis>
          <kendo-chart-category-axis-item [labels]="{ rotation: 'auto' }">
          </kendo-chart-category-axis-item>
      </kendo-chart-category-axis>
      <kendo-chart-tooltip>
        <ng-template kendoChartSeriesTooltipTemplate let-value="value">
          Avg Min Temp : {{ value.from }} °C <br>
          Avg Max Temp : {{ value.to }} °C"
        </ng-template>
      </kendo-chart-tooltip>
    </kendo-chart>
  `
})
export class AppComponent {
  public weatherData = [
    { month: "January", min: 5, max: 11 },
    { month: "February", min: 5, max: 13 },
    { month: "March", min: 7, max: 15 },
    { month: "April", min: 10, max: 19 },
    { month: "May", min: 13, max: 23 },
    { month: "June", min: 17, max: 28 },
    { month: "July", min: 20, max: 30 },
    { month: "August", min: 20, max: 30 },
    { month: "September", min: 17, max: 26 },
    { month: "October", min: 13, max: 22 },
    { month: "November", min: 9, max: 16 },
    { month: "December", min: 6, max: 13 }
  ];

  public labelContentFrom(e: any): string {
      return `${ e.value.from } °C`;
  }

  public labelContentTo(e: any): string {
      return `${ e.value.to } °C`;
  }
}
In this article