Angular Range Bar Chart

Download Angular Chart Samples

Example shows Angular Range Bar Chart along with index / data labels.

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
	chart: any;

	chartOptions = {
		animationEnabled: true,
		theme: "light2",
		title: {
			text: "Employees Salary in a Company"
		},
		axisX: {
			title: "Departments"
		},
		axisY: {
			title: "Salary in USD",
			interval: 10,
			suffix: "k",
			prefix: "$"
		}, 
		data: [{
			type: "rangeBar",
			showInLegend: true,
			yValueFormatString: "$#0.#K",
			indexLabel: "{y[#index]}",
			legendText: "Department wise Salary Range",
			color: "#6d78ad",
			dataPoints: [
				{ x: 10, y:[110, 155], label: "Data Scientist" },
				{ x: 20, y:[97, 149], label: "Product Manager" },
				{ x: 30, y:[85, 117], label: "Quality Assurance" },
				{ x: 40, y:[95, 135], label: "Software Engineer" },
				{ x: 50, y:[95, 155], label: "Web Developer" }
			]
		}]
	}	
}                              
/* app.module.ts */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import * as CanvasJSAngularChart from '../assets/canvasjs.angular.component';
var CanvasJSChart = CanvasJSAngularChart.CanvasJSChart;

@NgModule({
  declarations: [
    AppComponent,
    CanvasJSChart
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }                        
<div>
    <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart>    
</div>

Chart Customizations

In the above example prefix & suffix are added in the axis label. yValueFormatString is used to format the y-value shown in indexlabel & tooltip. Some other common customizations in range bar chart includes bevelEnabled, color, etc.

Note   For step by step instructions, follow our Angular Integration Tutorial