title: Chart Skinning Using p:layout and Dashboards
body: <p>I can't seem to get my code to work the way I want.  I'm attempting to format charts on a page with JSF templates.  I'm using JSF2.0, NetBeans 6.9.1, GlassFish 3.0.1 with Mojarra 2.0.3, and PrimeFaces 2.2. For the template I am using . I have placed the charts into dashboard panels. The charts themselves show up, but I cannot modify their size, or display the piechart legends. I have put the the style and script tags, shown in the documentation and showcase, on the main template page where the other css references are located. I've used this code:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
          .chartClass {
              width: 250px;
              height: 145px;
          }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          var piechartStyle = {
              padding:20,
              legend: {
                  display: "right",
                  spacing:10
              }
          };
      &lt;/script&gt;
  </code></pre>
  
  <p>On the template client page, where I display the charts, this is the code I've used:</p>
  
  <pre><code>    &lt;ui:define name="main_base_content"&gt;
                  &lt;h:form&gt;
                      &lt;p:dashboard id="board" model="#{dashboardBean.model}"&gt;
  
                          &lt;p:panel id="receipts_chart" header="Receipts Chart" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:pieChart model="#{receiptsChartBean.model}" styleClass="piechartStyle" /&gt;
                          &lt;/p:panel&gt;
                          &lt;p:panel id="shipments_chart" header="Shipments Chart" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:pieChart model="#{shipmentsChartBean.model}" styleClass="piechartStyle" /&gt;
                          &lt;/p:panel&gt;
  
                          &lt;p:panel id="receipts_graph" header="Receipts Graph" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:lineChart model="#{receiptsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Receipts"&gt;
                                  &lt;p:chartSeries label="Receipts" value="#{line.receipts}" /&gt;
                              &lt;/p:lineChart&gt;
                          &lt;/p:panel&gt;
                          &lt;p:panel id="shipments_graph" header="Shipments Graph" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:lineChart model="#{shipmentsChartBean.lineModel}" var="line" titleX="Date" titleY="Number of Shipments"&gt;
                                  &lt;p:chartSeries label="Receipts" value="#{line.receipts}" /&gt;
                              &lt;/p:lineChart&gt;
                          &lt;/p:panel&gt;
  
  
                          &lt;p:panel id="volume_received_graph" header="Volume Received - Graph" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:stackedColumnChart model="#{shipmentsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight"&gt;
                                  &lt;p:chartSeries label="Customer1" value="#{stack.stackedShipments}" /&gt;
                                  &lt;p:chartSeries label="Customer2" value="#{stack.stackedShipments}" /&gt;
                                  &lt;p:chartSeries label="Customer3" value="#{stack.stackedShipments}" /&gt;
                                  &lt;p:chartSeries label="Customer4" value="#{stack.stackedShipments}" /&gt;
                              &lt;/p:stackedColumnChart&gt;
                          &lt;/p:panel&gt;
                          &lt;p:panel id="weight_received_graph" header="Weight Received - Graph" toggleable="true" toggleSpeed="200"&gt;
                              &lt;p:stackedColumnChart model="#{receiptsChartBean.stackModel}" var="stack" titleX="Date" titleY="Receipts by Weight"&gt;
                                  &lt;p:chartSeries label="Customer1" value="#{stack.stackedReceipts}" /&gt;
                                  &lt;p:chartSeries label="Customer2" value="#{stack.stackedReceipts2}" /&gt;
                                  &lt;p:chartSeries label="Customer3" value="#{stack.stackedReceipts3}" /&gt;
                                  &lt;p:chartSeries label="Customer4" value="#{stack.stackedReceipts4}" /&gt;
                              &lt;/p:stackedColumnChart&gt;
                          &lt;/p:panel&gt;
                      &lt;/p:dashboard&gt;
                  &lt;/h:form&gt;
              &lt;/ui:define&gt;
  </code></pre>
  
  <p>The charts are filled with dummy data. They display, but the skinning is not working. I looked at the page with Firebug and see that despite setting the width and height of charts to 250px and 145px respectively, they remain at the default values. </p>
  
  <p><img src="https://i.stack.imgur.com/flT2X.png" alt="screenshot of Firebug"></p>
  
  <p>I'm not sure where I've gone wrong. Do charts not work in layouts and/or dashboards? Oh, I've also tried putting the .chartClass into the cssLayout.css document - that did not work either.</p>