Example shows Angular Column Chart with numeric axis. Column charts also referred to as vertical bar chart.
/* app.component.ts */ 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', standalone: true, imports: [CommonModule, RouterOutlet, CanvasJSAngularChartsModule], templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { title:{ text: "Angular Column Chart" }, animationEnabled: true, data: [{ type: "column", dataPoints: [ { x: 10, y: 71 }, { x: 20, y: 55 }, { x: 30, y: 50 }, { x: 40, y: 65 }, { x: 50, y: 95 }, { x: 60, y: 68 }, { x: 70, y: 28 }, { x: 80, y: 34 }, { x: 90, y: 14 } ] }] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
You can easily change the color of dataPoint using color property or change its width using dataPointWidth. Some other customizations include setting theme, animationEnabled, etc.
Note For step by step instructions, follow our Angular Integration Tutorial