Chartjs-chart-waffle NPM

chartjs-chart-waffle

Chart.js module for waffle charts.

waffle chart example

Install

npm install --save chart.js chartjs-chart-waffle

yarn add chart.js chartjs-chart-waffle

Usage

Data Structure

Sample (Vanilla Chart.js)

const config = {
  type: "waffle",
  data: {
    labels: ["Apple", "Orange", "Banana"],
    datasets: [
      {
        data: [10, 3, 5],
        backgroundColor: [
          "rgba(255, 26, 104, 1)",
          "rgba(54, 162, 235, 1)",
          "rgba(255, 206, 86, 1)",
        ],
      },
    ],
  },
  options: {
    row: 8,
    column: 8,
    gap: 16,
    total: 50,
    fill: true,
    fillColor: "#eee",
    radius: 8,
  },
};

Sample (React) Example

Options

Name	Type	Default	Description
labels	`string[]`	Required	Labels. (Appears in tooltip)
data	`number[]`	Required	Data points
backgroundColor	`string[]`	Required	Color of active data points
row	`number`	Required	Number of rows
column	`number`	Required	Number of columns
gap	`number`	5	Gap between blocks in px
total	`number`	-	Arbitrary total of the waffle data. Default: Sum of the `data` array
fill	`boolean`	false	Fill placeholder blocks
fillColor	`string`	#eee	Color of placeholder blocks
radius	`number`	4	Corner radius of a block

Roadmap

Chart.js v4 compatible
Legends
Better types
Animation

Credits

Inspired by @sgratzl and his work within Chart.js ecosystem

chart.js chart waffle

@everything-registry/sub-chunk-1314

3.9.2

9 months ago

3.9.1

9 months ago