Back to Browse

Getting Started with the Angular Bullet Chart

222 views
Jul 25, 2023
12:05

Learn how to create and configure the Syncfusion Angular Bullet Chart component using the Angular CLI tool and the Syncfusion EJ2 Angular Charts package. This video also explains how to set a value and target; set minimum, maximum, and interval values; and add a title, subtitle, dimensions, and a tooltip. You’ll see how to enable a legend and change the orientation. The Angular Bullet Chart is used to visually compare values, similar to the commonly used bar chart. A bullet chart displays one or more values and compares them with a target value. You can also display the values in ranges of performance, such as poor, satisfactory, and good. You can position the bullet chart in either vertical or horizontal orientation. This is helpful when viewing the bullet chart on mobile devices. Target bar lines denote the current value and run perpendicular to the feature measure. You can render multiple measure bars as well as multiple comparative value symbols to allow comparison of several values at once. A range in a bullet chart helps measure the performance of data against a qualitative state. Each color of the range represents a quality such as good, bad, and acceptable. Download an example from GitHub: https://github.com/SyncfusionExamples/getting-started-with-the-angular-bullet-chart-component Refer to the following documentation on the Syncfusion Angular Bullet Charts component: https://ej2.syncfusion.com/angular/documentation/bullet-chart/getting-started Check out this online example of the Angular Bullet Charts component: https://ej2.syncfusion.com/angular/demos/#/material/bullet-chart/default TRIAL LICENSE KEY ---------- If you need a trial license key, start an Angular trial from your Syncfusion account and then obtain a trial license key from the downloads page: https://www.syncfusion.com/account/manage-trials/start-trials Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/communitylicense BOOKMARK DETAILS -------------- [00:00] Introduction [00:40] Create an Angular application [01:43] Add a Bullet Chart [03:35] Add a target and value [05:22] Add multiple data points [05:42] Change dimensions [06:09] Add category value [06:39] Add a title and subtitle [07:13] Add ranges [08:27] Add a legend [09:17] Tick lines [10:17] Add a tooltip [10:59] Orientation ANGULAR BULLET CHART ------------------ Product overview: https://www.syncfusion.com/angular-components/angular-bullet-chart Documentation: https://ej2.syncfusion.com/angular/documentation/bullet-chart/getting-started Online examples: https://ej2.syncfusion.com/angular/demos/#/material/bullet-chart/default Download free trial: https://www.syncfusion.com/downloads/angular/confirm npmjs package: https://www.npmjs.com/package/@syncfusion/ej2-angular-charts SUBSCRIBE ---------- Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc Sign up to receive email updates: https://www.syncfusion.com/account/email-preference SOCIAL COMMUNITIES ------------- Facebook: https://www.facebook.com/Syncfusion/ Twitter: https://twitter.com/Syncfusion LinkedIn: https://www.linkedin.com/company/syncfusion Instagram: https://www.instagram.com/syncfusionofficial/ #angular #bulletchart #chart

Download

0 formats

No download links available.

Getting Started with the Angular Bullet Chart | NatokHD