Charts - Scatter

Scatter charts are based on basic line charts with the x axis changed to a linear axis. To use a scatter chart, data must be passed as objects containing X and Y properties.

Documentation Widget
<style type="text/css">
    .ui-chart {
        margin-bottom: 50px;

<p:scatterChart model="#{chartJsView.scatterModel}" style="width: 100%; height: 500px;"/>


Built-in component themes created by the PrimeFaces Theme Designer.

nova-light Nova-Light
nova-dark Nova-Dark
nova-colored Nova-Colored
luna-blue Luna-Blue
luna-amber Luna-Amber
luna-green Luna-Green
luna-pink Luna-Pink
omega Omega


Create awesome applications in no time using the premium templates and impress your users.