Open In App

Angular PrimeNG Chart Complete Reference

Last Updated : 27 Sep, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

Angular PrimeNG Chart Component facilitates the various chart designs that depict the data in different graphical representations. It is open open-source HTML5-based charting library.

The complete list of Chart Components is listed below with their brief description:

ChartModel Component

The ChartModel provides different types of properties that help us to customize the charts in Angular.

Components

Descriptions

ChartModel Charts.js Chart.js is an HTML5-based charting library that is widely used to create static as well as dynamic charts such as bar graphs, pie charts, line graphs, etc.
ChartModel Change Detection The ChartModel Change Detection redraws the chart when a new data object is created.
ChartModel Properties The ChartModel Properties are used to modify the component and display according to the design of the website.
ChartModel Methods The methods are used to perform some actions on the component and change its appearance or functionality.
ChartModel Chart Types The ChartModel Types has six different types of charts: pie, doughnut, line(line or horizontalBar), bar, radar, and polarArea.
ChartModel Data The data of a chart is provided using a binding to the data property, each type has its own format of data
ChartModel Options The general chart options are defined with options property.
ChartModel Events The ChartModel Events are called when some action is being performed on the component, appropriate action can be taken.
ChartModel Responsive The ChartModel responsive is used to make the charts responsive based on screen sizes.

BarChart Component

A Bar Chart or bar graph is a chart representing Grouped data in a rectangular bar form having lengths that are proportional to the values that they represent.

Components

Description

BarChart Vertical In the Bar chart vertical, datasets are represented in a vertical orientation.
BarChart Horizontal In the Bar chart Horizontal, datasets are represented in Horizontal orientation.
BarChart Multi Axis In Multi Axis BarChart, dataSets can be assigned a customized axis using the property AxisID.
BarChart Stacked This can be done by setting stacked=”true” in options.

Doughnut Chart Component

A Doughnut chart is an advanced variation of a pie chart. The Donut chart demonstrates the proportions of categorical data, with the size of each piece representing the proportion of each category. A donut chart is created using a string field and a count of features, numbers, or rate/ratio fields.

Line Chart Component

A LineChart or line graph is a type of chart used to display information as a series of data points that act as a dataset called markers connected with lines. The line chart can be modified to save single axes or multiple axes.

Components

Descriptions

Line Chart Multi Axis In Line Chart Multi-Axis, we can define customized axes for each dataset.
Line Chart Line Styles A line chart or line graph is a type of chart that displays information as a series of data points called ‘markers’ connected by straight line segments.

Polar Area Chart Component

The Polar Area chart is another version of a pie chart, except sections are in equal angel and differ rather in how far sections expand from the center of the circle on the basis of entered data, we use a polar area diagram to plot cyclic phenomena (e.g., count of deaths by month).

Pie Chart Component

The PieChart is a technique that is used to represent data in a circular-shaped graph, & used to represent simple data in which points belong to a combination of various categories. Each category is represented as a “slice of the pie.” The size of the slice is directly proportional value of the point that belongs to a particular category.

Radar Chart Component

A Radar Chart illustrates the multivariate data of three or more quantitative variables that are mapped onto an axis. 

Combo Chart Component

A Combo Chart Component is a combination chart that compares data in a few different categories over a period of time. we generally use two or three types of charts combined together to show a relationship between data points. In particular, a bar chart and a line chart are used together.


Similar Reads

How to Set Chart Title and Name of X Axis and Y Axis for a Chart in Chart.js ?
In this article, we will learn how to set the title, the name of the x-axis, and the name of the y-axis for a chart using the ChartJS CDN library. Approach:In the HTML template, use the <canvas> tag to show the line graph.In the script section of the code, instantiate the ChartJS object by setting the type, data, and options properties of the
3 min read
Angular PrimeNG File Complete Reference
Angular PrimeNG Files provides different components to retrieve the information related to the file, along with facilitating the file manipulation, & other operations, in order to modify the file content. This enhances the overall user experience. FileUpload Component has an advanced uploader facility, such as multi-file uploads, auto uploading
2 min read
Angular PrimeNG Button Complete Reference
Angular PrimeNG Button facilitates different standards of Buttons that define the various functionalities & denote the status and severities of the Button. It also provides different styling, such as a Split button, and Speed Dial button for the button component, which enhances the overall user experience of the Site. The complete list of Butto
4 min read
Angular PrimeNG Dragdrop Complete Reference
Angular PrimeNG Dragdrop Component facilitates the implementation of the drag & drop functionality to any element, by applying the related attribute to it. By implementing this component, it enhances the overall user interaction with the website along with increasing the experience. The complete list of Dragdrop Component is listed below with t
1 min read
Angular PrimeNG Form Complete Reference
Angular PrimeNG Form facilitates the various input components for taking the input field & validating, which helps to design a responsive form for a single-page-application, that enhances the user experience, along with increasing the user interactivity in the Web application. There are various components that are provided by the Angular PrimeN
31 min read
Angular PrimeNG Utilities Complete Reference
Angular PrimeNG Utilities facilitates the service that helps to filter the collections by including the constraints within the Table. The complete list of Utility Components is listed below with their brief description: FilterService ComponentThe Filter Service Component is a helper utility that helps filter the items from the list of collections b
1 min read
Angular PrimeNG Messages Complete Reference
Angular PrimeNG Messages Component provides various types of facilities, such as Message Service and severity, Static and dynamic Content, different form layouts, etc., in order to render the status of the Message to the user. Messages Component The Messages Component can be used to display a message with particular severity, summary, and detail as
2 min read
Angular PrimeNG Directives Complete Reference
Angular PrimeNG Directives provides various components, such as defer, Focus Trap, StyleClass, & Ripple, that facilitate the different effects on the component, while loading the content, along with including the animation styling to make interactive web applications, along with enhancing the user experience. The complete list of Directives Com
3 min read
Angular PrimeNG Media Complete Reference
Angular PrimeNG Media facilitates the various components, such as Carousel, Galleria, & Image components, that help to design & display a better user interface for the website. This also helps to enhance the overall user experience, along with engaging the user to the site. The complete list of Media Components is listed below with their br
4 min read
Angular PrimeNG Overlay Complete Reference
Angular PrimeNG Overlay facilitates the rendering of the content/ confirmation windows, which is shared with multiple actions for the same component. The overlay can also be created dynamically for the dialogs to display the content, & can also displayed from the edges of the screen by making the Sidebar panel, in order to show the informative
6 min read