Angular Multi Series Range Bar Chart

Download Angular Chart Samples

Example shows Angular Multi Series Range Bar Chart where each datapoints of different dataseries are placed next to each other. Multi Series Range Bar chart can be used to compare similar range of values across different series.

import { Component } from '@angular/core';
declare var require: any;
var CanvasJS = require('../assets/canvasjs.min');

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {	
  chartOptions = {
    animationEnabled: true,
    theme: "light1",
    exportEnabled: true,
    title: {
      text: "Average Temparature Comparsion"
    },
    axisY: { 
      title: "Temperature (°C)",
      suffix: " °C"
    }, 
    toolTip: {
      shared: true,
    },
    data: [{
      type: "rangeBar",
      showInLegend: true,
      yValueFormatString: "#.00°C",
      name: "California",
      color: "#F57C00",
      indexLabel: "{y[#index]}",
      toolTipContent: "{label}<br/><span style='\"'color:{color}'\"'>{name}</span>: <b>MIN:</b>{y[0]}, <b>MAX:</b>{y[1]}",
      dataPoints: [
        { y: [-13.60086075, 36.89945], label: "1979" },
        { y: [-13.37094904, 38.41296667], label: "1980" },
        { y: [-11.69145833, 38.10635833], label: "1981" },
        { y: [-15.2154825, 35.93550833], label: "1982" },
        { y: [-11.922074, 37.152325], label: "1983" }
      ]
    },{
      type: "rangeBar",
      showInLegend: true,
      yValueFormatString: "#.00°C",
      name: "Texas",
      color: "#FBC02D",
      indexLabel: "{y[#index]}",
      toolTipContent: "<span style='\"'color:{color}'\"'>{name}</span>: <b>MIN:</b>{y[0]}, <b>MAX:</b>{y[1]}",
      dataPoints: [
        { y: [-4.238106667, 36.84065], label: "1979" },
        { y: [-2.918750833, 38.03693333], label: "1980" },
        { y: [-1.542025083, 37.14540833], label: "1981" },
        { y: [-4.330412333, 37.831475], label: "1982" },
        { y: [-4.681096558, 37.37269167], label: "1983" }
      ]
    }]
  }	
}                              
/* 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 example above, shared property of tooltip is set to true. You can format the y values in tooltip using yValueFormatString property. Other customization options include toolTipContent, contentFormatter, legendText, etc.

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