Example shows Angular Multi Series Area Chart with custom axis labels for specific datapoints.
/* app.component.ts */ import { Component } from '@angular/core'; import { RouterOutlet } from '@angular/router'; import { CommonModule } from '@angular/common'; import { CanvasJSAngularChartsModule } from '@canvasjs/angular-charts'; @Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet, CommonModule, CanvasJSAngularChartsModule], templateUrl: './app.component.html', styleUrl: './app.component.css', }) export class AppComponent { chartOptions = { animationEnabled: true, title: { text: 'Email Analysis', }, axisY: { title: 'Number of Emails', }, data: [{ type: 'area', name: 'Received', showInLegend: true, legendMarkerType: 'square', color: 'rgba(40,175,101,0.6)', markerSize: 0, dataPoints: [ { x: new Date(2013, 0, 1, 0, 0), y: 7, label: 'midnight' }, { x: new Date(2013, 0, 1, 1, 0), y: 8 }, { x: new Date(2013, 0, 1, 2, 0), y: 5 }, { x: new Date(2013, 0, 1, 3, 0), y: 7 }, { x: new Date(2013, 0, 1, 4, 0), y: 6 }, { x: new Date(2013, 0, 1, 5, 0), y: 8 }, { x: new Date(2013, 0, 1, 6, 0), y: 12 }, { x: new Date(2013, 0, 1, 7, 0), y: 24 }, { x: new Date(2013, 0, 1, 8, 0), y: 36 }, { x: new Date(2013, 0, 1, 9, 0), y: 35 }, { x: new Date(2013, 0, 1, 10, 0), y: 37 }, { x: new Date(2013, 0, 1, 11, 0), y: 29 }, { x: new Date(2013, 0, 1, 12, 0), y: 34, label: 'noon' }, { x: new Date(2013, 0, 1, 13, 0), y: 38 }, { x: new Date(2013, 0, 1, 14, 0), y: 23 }, { x: new Date(2013, 0, 1, 15, 0), y: 31 }, { x: new Date(2013, 0, 1, 16, 0), y: 34 }, { x: new Date(2013, 0, 1, 17, 0), y: 29 }, { x: new Date(2013, 0, 1, 18, 0), y: 14 }, { x: new Date(2013, 0, 1, 19, 0), y: 12 }, { x: new Date(2013, 0, 1, 20, 0), y: 10 }, { x: new Date(2013, 0, 1, 21, 0), y: 8 }, { x: new Date(2013, 0, 1, 22, 0), y: 13 }, { x: new Date(2013, 0, 1, 23, 0), y: 11 }, ], }, { type: 'area', name: 'Sent', showInLegend: true, legendMarkerType: 'square', color: 'rgba(0,75,141,0.7)', markerSize: 0, dataPoints: [ { x: new Date(2013, 0, 1, 0, 0), y: 12, label: 'midnight' }, { x: new Date(2013, 0, 1, 1, 0), y: 10 }, { x: new Date(2013, 0, 1, 2, 0), y: 3 }, { x: new Date(2013, 0, 1, 3, 0), y: 5 }, { x: new Date(2013, 0, 1, 4, 0), y: 2 }, { x: new Date(2013, 0, 1, 5, 0), y: 1 }, { x: new Date(2013, 0, 1, 6, 0), y: 3 }, { x: new Date(2013, 0, 1, 7, 0), y: 6 }, { x: new Date(2013, 0, 1, 8, 0), y: 14 }, { x: new Date(2013, 0, 1, 9, 0), y: 15 }, { x: new Date(2013, 0, 1, 10, 0), y: 21 }, { x: new Date(2013, 0, 1, 11, 0), y: 24 }, { x: new Date(2013, 0, 1, 12, 0), y: 28, label: 'noon' }, { x: new Date(2013, 0, 1, 13, 0), y: 26 }, { x: new Date(2013, 0, 1, 14, 0), y: 17 }, { x: new Date(2013, 0, 1, 15, 0), y: 23 }, { x: new Date(2013, 0, 1, 16, 0), y: 28 }, { x: new Date(2013, 0, 1, 17, 0), y: 22 }, { x: new Date(2013, 0, 1, 18, 0), y: 10 }, { x: new Date(2013, 0, 1, 19, 0), y: 9 }, { x: new Date(2013, 0, 1, 20, 0), y: 6 }, { x: new Date(2013, 0, 1, 21, 0), y: 4 }, { x: new Date(2013, 0, 1, 22, 0), y: 12 }, { x: new Date(2013, 0, 1, 23, 0), y: 14 }, ], }], }; }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height:'360px'}"></canvasjs-chart> </div>
You can show custom label to a particular datapoint by using label property of datapoint. You can use labelFormatter to completely format all the axis labels. For simpler formatting requirements you can use valueFormatString.