In Angular Multi Series Range Column Chart, datapoints from different series are placed next to one another and are differentiated by their series color.
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { theme: "dark2", animationEnabled: true, exportEnabled: true, title:{ text: "Temperature of New York & London", }, axisY: { title: "Temperature", valueFormatString: "#0.##°F", crosshair: { enabled: true, valueFormatString: "#0.0°F" } }, axisX: { valueFormatString: "MMM", crosshair: { enabled: true, snapToDataPoint: true } }, toolTip: { shared: true, }, data: [ { type: "rangeColumn", bevelEnabled: true, yValueFormatString: "#0.##°F", name: "New York", showInLegend: true, dataPoints: [ { x: new Date(2021, 0, 1), y: [28, 40] }, { x: new Date(2021, 1, 1), y: [30, 42] }, { x: new Date(2021, 2, 1), y: [36, 50] }, { x: new Date(2021, 3, 1), y: [46, 62] }, { x: new Date(2021, 4, 1), y: [55, 71] }, { x: new Date(2021, 5, 1), y: [64, 80] }, { x: new Date(2021, 6, 1), y: [70, 85] }, { x: new Date(2021, 7, 1), y: [69, 83] }, { x: new Date(2021, 8, 1), y: [62, 76] }, { x: new Date(2021, 9, 1), y: [51, 65] }, { x: new Date(2021, 10, 1), y: [42, 54] }, { x: new Date(2021, 11, 1), y: [34, 44] } ] }, { type: "rangeColumn", bevelEnabled: true, showInLegend: true, name: "London", yValueFormatString: "#0.##°F", dataPoints: [ { x: new Date(2021, 0, 1), y: [37, 47] }, { x: new Date(2021, 1, 1), y: [37, 48] }, { x: new Date(2021, 2, 1), y: [39, 53] }, { x: new Date(2021, 3, 1), y: [43, 59] }, { x: new Date(2021, 4, 1), y: [48, 65] }, { x: new Date(2021, 5, 1), y: [54, 71] }, { x: new Date(2021, 6, 1), y: [58, 75] }, { x: new Date(2021, 7, 1), y: [57, 74] }, { x: new Date(2021, 8, 1), y: [53, 68] }, { x: new Date(2021, 9, 1), y: [48, 60] }, { x: new Date(2021, 10, 1), y: [41, 53] }, { x: new Date(2021, 11, 1), y: [38, 48] } ] }] } }
/* 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>
color property can be used to change the color of each series. Shared Tooltip will be a useful feature in case of multi-series charts. Content of the tooltip can be customized by using contentFormatter.