Chart

Data chart

A chart (bar/line/donut/area) aggregated from a collection via Chart.js.

Markup

Drops in as data-pb-block="chart".

html

<div data-pb-block="chart" class="pb-chart" data-pb-collection="" data-pb-metric="count" data-pb-field="" data-pb-group="" data-pb-date-bucket="" data-pb-chart-type="bar" style="font-family:inherit;border:1px solid #e2e8f0;border-radius:0.75rem;padding:1.25rem;background:#fff;max-width:40rem;">
  <div class="pb-chart__title" style="font-size:0.95rem;font-weight:600;color:#334155;margin-bottom:0.75rem;">Chart</div>
  <div class="pb-chart__canvas-wrap" style="position:relative;height:18rem;">
    <canvas class="pb-chart__canvas"></canvas>
  </div>
  <div class="pb-chart__placeholder" style="color:#94a3b8;font-size:0.85rem;padding:0.5rem 0;">Pick a collection in the Settings panel — the chart renders on the published page.</div>
</div>

Settings

Everything a block can be configured to do:

Bind to State: Drive content reactively from a State with declarative Alpine — x-text, x-show or x-model over $store.app.<stateKey>.
On event → run a Flow: Wire an interaction to a Flow: set data-pb-flow="<slug>" and data-pb-flow-event="click|submit|hover|change|…". The flow's returned actions update the page.
Link to a page: Navigate to another published page on click with data-pb-page="<slug>".
Styles & classes: Edit spacing, colour and layout visually in the GrapesJS editor. The wrapper carries data-pb-block="chart" so it imports as a labelled, editable component.
Array source: Iterates a State array with x-for="item in $store.app.<key>"; bind each item with x-text="item.<field>".
Live updates: A Flow setState action updates the bound array and the list re-renders without a reload.