Pyramid Chart

Here is another option:

Use a template column to generate a snippet that can be used in Rich text component. In this example we have 5 steps. Replace {Value1000} , {Width1000} , {Value800} , {Width800} , etc., with the actual values or column names that hold the values for each step of the chart. The widths should be percentages representing the relative size of each step compared to the base.

image

<div style=“width: 100%; text-align: center; position: relative;”>
<div style=“background-color: #8e44ad; height: 30px; width: {Width1000}; margin: 0 auto; line-height: 30px;”>{Value1000}</div>
<div style=“background-color: #3498db; height: 30px; width: {Width800}; margin: 0 auto; line-height: 30px;”>{Value800}</div>
<div style=“background-color: #2ecc71; height: 30px; width: {Width500}; margin: 0 auto; line-height: 30px;”>{Value500}</div>
<div style=“background-color: #f1c40f; height: 30px; width: {Width250}; margin: 0 auto; line-height: 30px;”>{Value250}</div>
<div style=“position: relative; width: {Width100}; margin: 0 auto; height: 30px;”>
<div style=“width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 30px solid #e67e22; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;”></div>
<div style=“position: absolute; width: 100%; left: 50%; transform: translateX(-50%); bottom: 30px; color: black; font-size: 12px;”>{Value100}</div>
</div>
</div>

1 Like