Example shows Angular Range Spline Area Chart with dark theme & custom dataseries color.
/* app.component.ts */ import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { chartOptions = { exportEnabled: true, animationEnabled: true, theme: "dark2", title:{ text: "Monthly Temperature Variation" }, subtitles: [{ text: "Bengaluru, India", }], axisX: { valueFormatString: "MMMM" }, axisY: { title: "Temperature (°C)", suffix: "°C" }, data: [{ type: "rangeSplineArea", xValueFormatString: "MMMM YYYY", yValueFormatString: "##.#°C", toolTipContent: "{x} </br> Min: {y[0]}, Max: {y[1]}", color: "#4DD0E1", 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] } ] }] } }
/* 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>
In the above example dark theme has been set & the color of the dataseries has been changed by setting color property. Some other cusotmizations used in the example includes xValueFormatString, yValueFormatString, toolTipContent, etc.