Search code examples
jqueryjsfchartsprimefaceschart.js

Charts in Primefaces 14.0.0 cause error in jQuery

I updated from Primefaces 13 to Primefaces 14.0.0. The Chart feature has been upgraded to use chart.js and i updated my code accordingly. Since it did not work out of the box, i copied the example code from the bar chart show case, but without any success.

Sadly, also the old previous implementation with the now deprecated primefaces chartjs component (p:barChart) does not work anymore. It also results in an error Uncaught TypeError: PrimeFaces.widget.Chart is undefined. Yes, also tried to remove all of the old code to make sure that the new example runs without interferences, which i describe as follows.

I tried all variants of the new chart component as described in the primefaces chart documentation, i.e. the RAW Json approach (via binding the value to a bean property that holds a json string), and also using the xdev java classes to generate the json. Last but not least i tried the Facet variant as shown below.

<ui:composition template="/WEB-INF/templates/templateAdminPage.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="jakarta.faces.core"
                xmlns:h="jakarta.faces.html"
                xmlns:ui="jakarta.faces.facelets"
                xmlns:my="jakarta.faces.component"
                xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:chart style="width: 100%; height: 300px">
  <f:facet name="value">
   {
     type: 'bar',
     data: {
       labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
       datasets: [{
         label: '# of Votes',
         data: [12, 19, 3, 5, 2, 3],
         borderWidth: 1,
         backgroundColor: ['DarkRed', 'CornflowerBlue', 'Gold', 'Lime', 'BlueViolet', 'DarkOrange']
       }]
     },
     options: {
       scales: {
         y: {
           beginAtZero: true
         }
       }
     }
   }
  </f:facet>
</p:chart>

</ui:define>
</ui:composition>

When I run the example i get an error in the browser console: Uncaught TypeError: Y.style is undefined, within jquery-plugins.js.xhtml.

And a follow up error in chart.js: Uncaught TypeError: right-hand side of 'in' should be an object, got undefined.

Screenshot of Error Console

I checked the js libraries loaded are up to date and that all include are up to date too. In use are:

  • Primeface v14.0.0
  • Chart.js v4.4.2 (determined via browser inspection)
  • jQuery v3.7.1

I also compared my code to the example showcase code, but i can't crasp the difference. The only thing i discovered is the different namespace used e.g. bar.xhtml example has a namespace definition that is xmlns:p="primefaces" instead of xmlns:p="http://primefaces.org/ui".

The maven dependencies i use are:

        <dependency>
            <groupId>org.primefaces</groupId>
            <artifactId>primefaces</artifactId>
            <version>14.0.0</version>
            <classifier>jakarta</classifier>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>primefaces-extensions</artifactId>
            <version>14.0.0</version>
            <classifier>jakarta</classifier>
        </dependency>
        <dependency>
            <groupId>org.primefaces.extensions</groupId>
            <artifactId>resources-monacoeditor</artifactId>
            <version>14.0.0</version>
        </dependency>
        <dependency>
            <groupId>software.xdev</groupId>
            <artifactId>chartjs-java-model</artifactId>
            <version>1.4.1</version>
        </dependency>

What am I missing? Is there some trick to make it work?

Thanks in advance for hints and your help!

Solution

  • Here is a reproducer: https://github.com/user-attachments/files/15794833/primfaces14-chart.zip

    Unzip and run mvn clean jetty:run and navigate to http://localhost:8080/ you will see it works fine