Example shows combination of Angular Range Area & Line Charts that are generally used to show range (high-low) values along with average.
/* 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 { chart: any; getChartInstance(chart: object) { this.chart = chart; this.addAverageSeries(); } addAverageSeries() { let dps = []; let chart = this.chart; for(let i = 0; i < chart.options.data[0].dataPoints.length; i++) { dps.push({ x: chart.options.data[0].dataPoints[i].x, y: (chart.options.data[0].dataPoints[i].y[0] + chart.options.data[0].dataPoints[i].y[1]) / 2 }); } chart.options.data.push({ type: "line", name: "Average", showInLegend: true, markerType: "triangle", markerSize: 0, color: "#EF5350", yValueFormatString: "##.0 °C", toolTipContent: "<span style='\"'color:{color}'\"'>{name}</span>: {y}", dataPoints: dps }); chart.render(); } chartOptions = { theme: "light2", exportEnabled: true, title: { text: "Temperature Variation" }, subtitles: [{ text: "Bengaluru (India)" }], axisX: { valueFormatString: "MMM" }, legend: { cursor: "pointer", dockInsidePlotArea: true, itemclick: function(e:any) { if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible ){ e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } }, toolTip: { shared: true }, data: [{ type: "rangeArea", name: "Temperature Range", showInLegend: true, color: "#7986CB", yValueFormatString: "##.0 °C", xValueFormatString: "MMMM YYYY", toolTipContent: "{x}<br><span style='\"'color:{color}'\"'>Min</span>: {y[0]}<br><span style='\"'color:{color}'\"'>Max</span>: {y[1]}", markerSize: 0, dataPoints: [ { x: new Date(2019, 0, 1), y: [12.0382, 30.1865] }, { x: new Date(2019, 1, 1), y: [16.2404, 34.2949] }, { x: new Date(2019, 2, 1), y: [18.2318, 36.0597] }, { x: new Date(2019, 3, 1), y: [21.4699, 36.7624] }, { x: new Date(2019, 4, 1), y: [21.3156, 35.3482] }, { x: new Date(2019, 5, 1), y: [21.087, 33.3196] }, { x: new Date(2019, 6, 1), y: [19.8427, 31.6698] }, { x: new Date(2019, 7, 1), y: [20.3135, 30.1392] }, { x: new Date(2019, 8, 1), y: [20.1342, 30.303] }, { x: new Date(2019, 9, 1), y: [18.8909, 30.5804] }, { x: new Date(2019, 10, 1), y: [16.4149, 30.3919] }, { x: new Date(2019, 11, 1), y: [14.7093, 29.8572] } ] }] } }
<div> <canvasjs-chart [options]="chartOptions" [styles]="{width: '100%', height: '360px'}" (chartInstance)="getChartInstance($event)"></canvasjs-chart> </div>
In the above example, toolTipContent is used to customize the content of the tooltip. You can enable legends for data-series present in the chart by setting showInLegend to true. The text shown in the legends can also be changed using legendText property.