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>