When I place two pie charts inside a panelGrid they disappear

Question

I want to place 2 primefaces pie charts side by side horizontally. I've put them into a panelGrid like that:

<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 simply disappeared when I added the panelGrid.

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

Answer 1

Try this :

<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>