A line chart or line graph is a type of chart which displays the information as a series of data points called markers connected by straight line segments. A line chart is often used to visualize the real-time data in regular time intervals or time series.

A basic example of line chart usage regarding the Prime libraries downloads would be as follows:

<p-chart type="line" [data]="linedata" width="300" height="100">
</p-chart>

The component class should define a line chart data, in which one refers to the PrimeNG series and the other one refers to the PrimeUI series over the past year, as shown here:

this.linedata = {
  labels: ['January', 'February', 'March', 'April', 'May', 
    'June', 'July', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    datasets: [
    {
      label: 'PrimeNG',
      backgroundColor: '#ffb870',
      borderColor: '#cc4e0e',
      data: [13, 22, 15, 38, 41, 42, 25, 53, 53, 63, 77, 93]
     },
     {
      label: 'PrimeUI',
      backgroundColor: '#66ff00',
      borderColor: '#6544a9',
      data: [15, 11, 18, 28, 32, 32, 42, 52, 48, 62, 77, 84]
     }
  ]
};

As per the preceding code snippets, along with the data and labels, we can also define background and border colors to make the line chart as fancy and customizable as we like. The following screenshot shows a snapshot result of the line chart as an example:

A bar chart or bar graph is a chart or graph that presents grouped data with rectangular bars, which are proportional to the values that they represent. PrimeNG also supports horizontal representation of bars in the graph.

A basic example of bar chart usage regarding the Prime libraries downloads would be as follows:

<p-chart type="bar" [data]="bardata" width="300" height="100">
</p-chart>

The component class should define the bar chart data, in which one bar refers to PrimeNG data and the other bar refers to the PrimeUI series over the past year, as shown here:

this.bardata = {
  labels: ['January', 'February', 'March', 'April', 'May', 
    'June', 'July', 'Aug', 'Sep',
    'Oct', 'Nov', 'Dec'],
    datasets: [
    {
      label: 'PrimeNG',
      backgroundColor: '#66ff00',
      borderColor: '#6544a9',
      data: [10, 15, 13, 27, 22, 34, 44, 48, 42, 64, 77, 89]
    },
    {
      label: 'PrimeUI',
      backgroundColor: '#ffb870',
      borderColor: '#cc4e0e',
      data: [5, 14, 15, 22, 26, 24, 32, 42, 48, 62, 66, 72]
    }
  ]
};

The following screenshot shows a snapshot result of the bar chart with PrimeNG and PrimeUI downloads over the time period of a year as an example:

In the preceding chart, only two datasets are compared over a regular period of time. This can be applied for multi-datasets as well.