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>
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.