When I put two pie charts inside the grid panel, they disappear

Question

I want to place 2 pride pie charts side by side horizontally . I placed them in panelGrid as follows:

<h:panelGrid columns="2">
<p:pieChart title="chart1" value="#{chartController.modelChart1}" legendPosition="w" showDataLabels="true" id="chartOne" />

<p:pieChart title="chart2" value="#{chartController.modelChart2}" legendPosition="w" showDataLabels="true" id="ChartTwo" />
</h:panelGrid>

But they just disappeared when I added the grid panel.

What is the problem or is there another way to place 2 charts side by side (on the same line) without using the grid panel?

Answer 1

Try the following:

<h:panelGrid columns="2">
    <p:panel style="width:100px;">
       <p:pieChart title="chart1" value="#{chartController.modelChart1}" legendPosition="w" showDataLabels="true" id="chartOne" />
    </p:panel>

    <p:panel style="width:100px;">
       <p:pieChart title="chart2" value="#{chartController.modelChart2}" legendPosition="w" showDataLabels="true" id="ChartTwo" />
    </p:panel>
</h:panelGrid>