For simpler charts you can render the chart right in the value facet.
<div class="card">
    <p:chart style="width: 100%; height: 500px;">
       <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
             }
           },
           plugins: {
               zoom: {
                   pan: {
                       enabled: true,
                       mode: 'y',
                       threshold: 5,
                   },
                   zoom: {
                       wheel: {
                           enabled: true
                       },
                       pinch: {
                           enabled: true
                       },
                       mode: 'y',
                   },
               }
           }
         }
       }
       </f:facet>
    </p:chart>
</div>