Example of Pyramid in Angular Chart Component

This Angular Pyramid Chart visualizes food comparison data by using pyramid series.

Food Consumption PyramidSource: wikipedia.org
Description

In this example, you can see how to render and configure a pyramid chart. This chart is shaped like a triangle, with lines dividing it into sections of varying widths. Depending on the Y coordinate, the width indicates a level of hierarchy among other categories. The DataLabel represents individual data and its value.

Tooltip is enabled in this example. To see the tooltip in action, hover a point or tap on a point in touch-enabled devices.

Injecting Module

Chart component features are segregated into individual feature-wise modules. To use Pyramid feature, we need to inject PyramidSeriesService into the @NgModule.providers section.

More information about the pyramid series can be found in this documentation section.