All Components

RangeBar

RangeBar Charts are categorical charts which represent a variation of the Bar Charts.

They display data as bars where each bar represents a value range that spans between its minimum and maximum levels. RangeBar Charts have floating bars unlike the standard Kendo UI Bar Charts, which have anchored bars to their X axis.

Basic Usage

The following example demonstrates the RangeBar Chart in action.

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart [title]="{ text: 'Average Weather Conditions' }">
      <kendo-chart-series>
        <kendo-chart-series-item type="rangeColumn"
                                 [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