Components / Charts / How To

Align Range Bar and Column Chart Series

The Kendo UI for Angular Charts provide options for displaying Range Bar and Range Column series that are vertically or horizontally aligned.

By default, each series item is rendered next to the previous one (and not directly on top or bottom of it). However, you can position the bars on top of each other by setting the spacing option to -1.

import { Component } from '@angular/core';

@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"
              [spacing]="-1">
        </kendo-chart-series-item>
        <kendo-chart-series-item
                type="rangeColumn"
                [data]="weatherData2"
                fromField="min"
                toField="max"
                categoryField="month">
        </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 weatherData2 = [
    { month: 'January', min: 13, max: 20 },
    { month: 'February', min: 15, max: 20 },
    { month: 'March', min: 17, max: 22 },
    { month: 'April', min: 21, max: 28 },
    { month: 'May', min: 25, max: 31 },
    { month: 'June', min: 30, max: 35 },
    { month: 'July', min: 32, max: 38 },
    { month: 'August', min: 32, max: 38 },
    { month: 'September', min: 28, max: 35 },
    { month: 'October', min: 24, max: 30 },
    { month: 'November', min: 18, max: 20 },
    { month: 'December', min: 15, max: 18 }
  ];
}

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { HttpClientModule } from '@angular/common/http';

import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  imports: [ BrowserModule, BrowserAnimationsModule, ChartsModule, FormsModule, HttpClientModule ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { ChartsModule } from '@progress/kendo-angular-charts';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article