1 NPM Install

Install the smart-webcomponents-angular package:

npm install smart-webcomponents-angular

2 Register styles

Add the default Smart UI stylesheet to angular.json -> projects -> <your-project> -> architect -> build -> options -> styles (merge with existing entries):

"styles": [
		"node_modules/smart-webcomponents-angular/source/styles/smart.default.css"
	]

Add optional theme CSS from the same package after smart.default.css if you use Bootstrap, Fluent, or other bundled themes.

3 Import the Angular module

Import ChartModule from smart-webcomponents-angular/chart: use @Component.imports for standalone, or add it to your AppModule (or feature module) imports array for NgModule apps.

import { ChartModule } from 'smart-webcomponents-angular/chart';

4 Root component (standalone)

Add ChartModule to your root standalone component (src/app/app.ts). Snippet from Smart UI demos (paths normalized to app.html / App where applicable):

 import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { ChartComponent } from 'smart-webcomponents-angular/chart';

import { ChartModule } from 'smart-webcomponents-angular/chart';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ ChartModule ],
  templateUrl: './app.html',
  styleUrl: './app.css'
})

export class App implements AfterViewInit, OnInit {	
	@ViewChild('chart', { read: ChartComponent, static: false }) chart!: ChartComponent;
	
	 caption = "Fitness & exercise weekly scorecard";
	 description = "Time spent in vigorous exercise by activity";
	 showLegend = true;
	 padding = { left: 10, top: 10, right: 15, bottom: 10 };
	 titlePadding = { left: 90, top: 0, right: 0, bottom: 10 };
	 dataSource = [
		{ Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25, Goal: 40 },
		{ Day: 'Tuesday', Running: 25, Swimming: 15, Cycling: 10, Goal: 50 },
		{ Day: 'Wednesday', Running: 30, Swimming: 10, Cycling: 25, Goal: 60 },
		{ Day: 'Thursday', Running: 40, Swimming: 20, Cycling: 25, Goal: 40 },
		{ Day: 'Friday', Running: 45, Swimming: 20, Cycling: 25, Goal: 50 },
		{ Day: 'Saturday', Running: 30, Swimming: 20, Cycling: 30, Goal: 60 },
		{ Day: 'Sunday', Running: 20, Swimming: 30, Cycling: 10, Goal: 90 }
	];
	 colorScheme = 'scheme13';
	 xAxis = {
		dataField: 'Day',
		unitInterval: 2,
		tickMarks: { visible: true, unitInterval: 1 },
		gridLines: { visible: true, unitInterval: 1 },
		valuesOnTicks: false,
		padding: { bottom: 10 }
	};
	 valueAxis = {
		unitInterval: 10,
		minValue: 0,
		maxValue: 50,
		title: { text: 'Time in minutes<br><br>' },
		labels: { horizontalAlignment: 'right' }
	};
	 seriesGroups = [
		{
			type: 'spline',
			series: [
				{
					dataField: 'Swimming',
					symbolType: 'square',
					labels: {
						visible: true,
						backgroundColor: '#FEFEFE',
						backgroundOpacity: 0.2,
						borderColor: '#7FC4EF',
						borderOpacity: 0.7,
						padding: { left: 5, right: 5, top: 0, bottom: 0 }
					}
				},
				{
					dataField: 'Running',
					symbolType: 'square',
					labels: {
						visible: true,
						backgroundColor: '#FEFEFE',
						backgroundOpacity: 0.2,
						borderColor: '#7FC4EF',
						borderOpacity: 0.7,
						padding: { left: 5, right: 5, top: 0, bottom: 0 }
					}
				}
			]
		}
	] 
	
	ngOnInit(): void {
		// onInit code.
	}

	ngAfterViewInit(): void {
	 }		
}

Boot the app with bootstrapApplication from src/main.ts and an ApplicationConfig in src/app/app.config.ts as generated by the CLI.

5 Template (standalone)

Use your markup in src/app/app.html (or inline template). Bind properties and events on smart-chart as needed:

 <smart-chart #chart id="chart" [caption]="caption" [description]="description" [showLegend]="showLegend"
    [padding]="padding" [titlePadding]="titlePadding" [dataSource]="dataSource" [colorScheme]="colorScheme"
    [xAxis]="xAxis" [valueAxis]="valueAxis" [seriesGroups]="seriesGroups"></smart-chart>

6 NgModule bootstrap (also supported)

Same npm package and angular.json styles as steps 1-2. Put ChartModule on your NgModule.imports instead of @Component.imports, and bootstrap with bootstrapModule(AppModule).

The demo sources bundled for this widget use standalone only (there is no app.module.ts in that folder). NgModule is fully supported: put ChartModule from smart-webcomponents-angular/chart on NgModule.imports, make your root component non-standalone (remove standalone: true and move widget modules from @Component.imports to the module), and bootstrap with platformBrowserDynamic().bootstrapModule(AppModule).

Minimal main.ts + app.module.ts pairing (adjust paths to match your CLI layout):

src/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule).catch((err) => console.error(err));

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ChartModule } from 'smart-webcomponents-angular/chart';

@NgModule({
	declarations: [ AppComponent ],
	imports: [ BrowserModule, ChartModule ],
	bootstrap: [ AppComponent ]
})
export class AppModule { }

Reuse the template and class logic from steps 4-5 in AppComponent, configured for declarations + NgModule.imports instead of a standalone @Component.