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.
In questa pagina del sito puoi guardare il video online How to Create Angular Charts Using Syncfusion and Angular CLI della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Syncfusion, Inc 28 giugno 2019, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 22,975 volte e gli è piaciuto 158 spettatori. Buona visione!
