Example shows Angular Range Column Chart which are basically floating vertical column charts to represent low & high values of range.
import { Component } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterOutlet } from '@angular/router'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @Component({ selector: 'app-root', templateUrl: './app.component.html', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule] }) export class AppComponent { chart: any; chartOptions = { theme: "light2", title:{ text: "Average Temperature Range" }, animationEnabled: true, subtitles: [{ text: "Los Angeles County, California" }], axisY: { title: "Temperature (°F)", suffix: "°F" }, data: [{ type: "rangeColumn", indexLabel: "{y[#index]}°", toolTipContent: "<b>{label}</b><br>Min: {y[0]} °F <br/> Max: {y[1]} °F", dataPoints: [ { label: "Jan", y: [48.5, 68.1] }, { label: "Feb", y: [50.3, 69.6] }, { label: "Mar", y: [51.6, 69.8] }, { label: "Apr", y: [54.4, 73.1] }, { label: "May", y: [57.9, 74.5] }, { label: "Jun", y: [61.4, 79.5] }, { label: "Jul", y: [64.6, 83.8] }, { label: "Aug", y: [65.6, 84.8] }, { label: "Sept", y: [64.6, 83.3] }, { label: "Oct", y: [59.9, 79.0] }, { label: "Nov", y: [52.6, 73.2] }, { label: "Dec", y: [48.3, 68.7] } ] }] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
The content of toolTip can be customized using the toolTipContent property. Some other commonly used customization options include showInLegend, shared(toolTip), etc.