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:

The Chart API also supports the utility methods shown here:

Method Description
refresh Redraws the graph with new data
reinit Destroys the existing graph and then creates it again
generateLegend Returns an HTML string of a legend for that chart
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.146.221.144