How to Create Angular Charts Using Syncfusion and Angular CLI
Learn how easily you can create and configure the Angular Charts of Syncfusion using the “ej2-angular-charts” package.
Remember, the Syncfusion Angular Charts can be used in any latest Angular version starting from 4.
By watching this video, you will be able to create an application with the help of Angular CLI and configure the Angular Charts much simpler with the help of “npm install” command. You will also learn how to define basic features on the Angular Charts of Syncfusion.
ANGULAR CHARTS
---------------------
Product overview: http://bit.ly/2WCP2GL
Examples: http://bit.ly/2KJX0Xp
Documentation: http://bit.ly/2WxY5UG
Download free trial: http://bit.ly/2XDFOGJ
GitHub source: https://github.com/syncfusion/ej2-ang...
npmjs package: https://www.npmjs.com/package/@syncfu...
SUBSCRIBE
---------------
Syncfusion on YouTube: http://bit.ly/syncfusionyoutube
Sign up to receive email updates: http://bit.ly/syncfusionemail
SOCIAL COMMUNITY
----------------------------
Facebook: / syncfusion
Twitter: / syncfusion
LinkedIn: / sync. .
Instagram: / syncfusion
TRANSCRIPT REFERENCE
----------------------
Make sure that you have the compatible versions of TypeScript and Angular in your machine before moving onto the application creation process –
Angular: 4 and above.
TypeScript: 2.6 and above
Also, use any of the editors like Visual Studio Code to view and edit the code better and you can view the output result on any of the supported browsers.
Set up the CLI project by installing the Angular CLI on your machine. For that, open the integrated terminal window in Visual Studio Code and type the command: npm install -g @angular/cli. This command will add the latest Angular packages to your machine.
Start a new Angular application using the CLI command: ng new angularChart . It'll prompt you to choose the routing option for your application. Choose "No". It also asks for CSS or SASS usage; opt for CSS here.] Now, an empty Angular application is created, so navigate to that newly created application folder. cd angularChart.
To use the Angular Charts of Syncfusion within this empty Angular application, I need to install the necessary packages first using the “npm install” command.
Now import the ChartModule from ej2-angular-charts package of Syncfusion into the “app.module.ts” file. Also, import and inject the necessary module services like LineSeriesService, CategoryService, LegendService, TooltipService and DataLabelService into your application to start using the appropriate Angular Chart features.
For Module injection reference - https://ej2.syncfusion.com/angular/do...
Now, add the Chart code within the template section of “app.component.html.ts” file and define the needed series within the “ejs-chart” code and set the series type as “Line”. You can display the categorized data on Angular Chart axis by customizing the axis property. Also, you can customize the Angular Chart UI much easily with its built-in available features like Legend, Tooltip, DataLabels, and much more.
Now, run the application with the command “ng serve --open” in the terminal space. This will compile the code and open the output result in your default browser.
Nesta página do site você pode assistir ao vídeo on-line How to Create Angular Charts Using Syncfusion and Angular CLI duração hora minuto segundo em boa qualidade , que foi baixado pelo usuário Syncfusion, Inc 28 Junho 2019, compartilhe o link com seus amigos e conhecidos, no youtube este vídeo já foi visto 22,975 vezes e gostou 158 espectadores. Boa visualização!
