Use chart.js as an extension in HTMX.

Installation

# 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.

Usage

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 and Enterprise Licensing

Professional support, as well as enterprise licenses are available. Please contact [email protected] for more information.