Customization

Each series is customized on a dataset basis, but you can customize the general or common options via the options attribute. For example, the line chart which customizes the default options would be as follows:

<p-chart type="line" [data]="linedata" [options]="options">
</p-chart>

The component needs to define the chart options with customized title and legend properties, as shown here:

this.options = {
  title: {
    display: true,
    text: 'PrimeNG vs PrimeUI',
    fontSize: 16
  },
  legend: {
    position: 'bottom'
  }
};

As per the preceding example, the title option is customized with a dynamic title, font size, and conditional display of the title, whereas the legend attribute is used to place the legend in top, left, bottom, and right positions. The default legend position is top. In this example, the legend position is bottom.

The line chart with the preceding customized options would result as the following snapshot...