Use chart.js as an extension in HTMX.
# npm
npm install @jop-software/hx-chart
# pnpm
pnpm add @jop-software/hx-chart
Make sure to include chart.js
as well as htmx.org
separately.
import "@jop-software/hx-chart";
<canvas
hx-ext="hx-chart"
hx-chart="true"
hx-chart-type="pie"
hx-chart-labels='["40%", "60%"]'
hx-chart-datasets='[{"data": ["40","60"], "backgroundColor": ["#dc3545", "#28a745"]}]'
></canvas>
Note
All attributes can be prefixed with data-
, so you can use data-hx-chart-type
instead of hx-chart-type
.
Professional support, as well as enterprise licenses are available. Please contact support@jop-software.de for more information.