Skip to main content

Posts

Showing posts with the label Angular 4 Bar Chart

Kendo UI Angular 4 Setting Up Project

Kendo UI Installation Instructions in Angular 4– Step 1- Installation npm install - g @ angular / cli ng new my - first - angular - project -- style = scss cd my - first - angular - project Step 2 - npm install -- save @ progress / kendo - angular - buttons @ progress / kendo - angular - l10n @ angular / animations Step 3 - npm install -- save @ progress / kendo - theme - default Step 4 - Once installed, import the NgModule of the components you need Example - import the DropDownsModule import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { DropDownsModule } from '@progress/kendo-angular-dropdowns' ; import { AppComponent } from './app.component' ; @ NgModule({ bootstrap : [AppComponent], declarations : [AppComponent], imports : [BrowserModule, BrowserAnima...
Read more

What classes should I add to module's declarations in Angular 4?

What classes should I add to module's declarations? We can add the declarable classes like components, directives and pipes in the module's declarations list and we can add only - components, directives and pipes classes in the @NgModule. Stayed Informed – Angular 4 Documentations with Example What classes should I not add to module's declarations? We do not declare - Module, Service, objects, strings, numbers, functions, entity models, configurations, business logic, and helper classes  in the module's declarations. Example – export const sharedConfig: NgModule = { bootstrap : [ AppComponent ], declarations : [ AppComponent, NavMenuComponent, HomeComponent, UserComponent, AccountDetailComponent, BarCodePipe ], imports : [ RouterModule.forRoot([ { path : '' , redirectTo : 'home' , pathMatch : 'full' }, { path : 'home...
Read more

Angular 4 Line Chart Example – How to Use Line Chart in Angular 4?

Line Chart – A line-chart is a chart which used to displays information as a series of data points and it is called straight line segments. Stayed Informed - Angular4 Interview Q/A Example for Line Chart – LineChart.Component.ts – import {Component} from '@angular/core' ; export class LineChart { data: any ; Message: any []; constructor () { this .data = { labels : [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' ], datasets : [ { label : '' , data : [ 62 , 58 , 80 , 82 , 57 , 56 , 40 ], fill: false , borderColor : '#4bc0c0' }, { label : '' , data : [ 29 , 47 , 42 , 19 , 84 , 25 , 90 ], fill: false , ...
Read more

Angular 4 Bar Chart Example –How to Use Bar Chart in Angular4?

Bar Chart – A bar-chart is a grouped of data with rectangular bars with lengths equivalent to the values of the data. Stayed Informed - Angular4 Interview Q/A Example for Bar Chart – BarChart.Component.ts – import {Component} from '@angular/core' ; export class BarChart { data: any ; constructor () { this .data = { labels : [ 'January' , 'February' , 'March' , 'April' , 'May' , 'June' , 'July' ], datasets : [ { label : '' , backgroundColor : '#42A5F5' , borderColor : '#1E88E5' , data : [ 63 , 58 , 82 , 81 , 56 , 55 , 41 ] }, { label : '' , backgroundColor : '#9CCC65' , borderColor : '#7CB342' , da...
Read more