### Formatter Example

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/usage.md

Example of using the formatter option to display labels with a unit.

```javascript
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: [15, 6, 6, 5, 4, 3, 2, 2],
      labels: {
        display: false,
        formatter: (ctx) => 'Kmq ' + ctx.raw.v
      }
    }]
  },
};
```

--------------------------------

### Treemap Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/usage.md

Example configuration for a treemap chart, including utility functions for coloring and dataset setup.

```javascript
// <block:utils:1>
function colorFromRaw(ctx) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'green';
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}
// </block:utils>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My treemap dataset',
        tree: [15, 6, 6, 5, 4, 3, 2, 2],
        borderColor: 'green',
        borderWidth: 1,
        spacing: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
      }
    ],
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'My treemap chart'
      },
      legend: {
        display: false
      }
    }
  }
};

// </block:config>

module.exports = {
  config,
};

```

--------------------------------

### Install Node Dependencies

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/README.md

Installs the necessary node dependencies for development.

```bash
> npm install
```

--------------------------------

### Basic Treemap Chart Setup

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/basic.md

This code snippet demonstrates the setup for a basic treemap chart, including data generation and utility functions for coloring.

```javascript
// <block:setup:1>
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};
// </block:setup>

// <block:utils:2>
function colorFromRaw(ctx, border) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'purple';
  if (border) {
    alpha += 0.5;
  }
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}
// </block:utils>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderColor: (ctx) => colorFromRaw(ctx, true),
        borderWidth: 1,
        spacing: -0.5, // Animations look better when overlapping a little
        backgroundColor: (ctx) => colorFromRaw(ctx),
      }
    ],
  },
};

// </block:config>

const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.tree = Utils.numbers(NUMBER_CFG);
      });
      chart.update();
    }
  },
];

module.exports = {
  actions,
  config
};
```

--------------------------------

### Setup and Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/labelsFontsAndColors.md

This code block sets up the data for the treemap and configures the chart, including custom label formatting, colors, fonts, and positioning.

```javascript
// <block:setup:1>
const DATA = [
  {
    what: 'Apples',
    value: 98,
    color: 'rgb(191, 77, 114)'
  },
  {
    what: 'Orange',
    value: 75,
    color: 'rgb(228, 148, 55)'
  },
  {
    what: 'Lime',
    value: 69,
    color: 'rgb(147, 119, 214)'
  },
  {
    what: 'Grapes',
    value: 55,
    color: 'rgb(80, 134, 55)'
  },
  {
    what: 'Apricots',
    value: 49,
    color: 'rgb(90, 97, 110)'
  },
  {
    what: 'Blackberries',
    value: 35,
    color: 'rgb(34, 38, 82)'
  }
];

// </block:setup>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'Fruits',
        tree: DATA,
        key: 'value',
        borderWidth: 0,
        borderRadius: 6,
        spacing: 1,
        backgroundColor(ctx) {
          if (ctx.type !== 'data') {
            return 'transparent';
          }
          return ctx.raw._data.color;
        },
        labels: {
          align: 'left',
          display: true,
          formatter(ctx) {
            if (ctx.type !== 'data') {
              return;
            }
            return [ctx.raw._data.what, 'Value is ' + ctx.raw.v];
          },
          color: ['white', 'whiteSmoke'],
          font: [{size: 20, weight: 'bold'}, {size: 12}],
          position: 'top'
        }
      }
    ],
  },
  options: {
    events: [],
    plugins: {
      title: {
        display: true,
        text: 'Different fonts and colors on labels'
      },
      legend: {
        display: false
      },
      tooltip: {
        enabled: false
      }
    }
  }
};

// </block:config>

module.exports = {
  config
};

```

--------------------------------

### Installation

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/index.md

Install the chartjs-chart-treemap package using npm.

```bash
> npm install chartjs-chart-treemap

```

--------------------------------

### Setup

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/groups.md

Defines the groups to be used for the treemap and a helper function to capitalize the first letter of a string.

```javascript
// <block:setup:3>
const GROUPS = ['region'];

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
// </block:setup>
```

--------------------------------

### Caption Formatter Example

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/usage.md

This example demonstrates how to use the `formatter` option for captions to customize the displayed text for grouped elements in a treemap.

```javascript
const data = [
  {category: 'main', subcategory: 'one', value: 1},
  {category: 'main', subcategory: 'one', value: 5},
  {category: 'main', subcategory: 'one', value: 3},
  {category: 'main', subcategory: 'two', value: 2},
  {category: 'main', subcategory: 'two', value: 1},
  {category: 'main', subcategory: 'two', value: 8},
  {category: 'other', subcategory: 'one', value: 4},
  {category: 'other', subcategory: 'one', value: 5},
  {category: 'other', subcategory: 'two', value: 4},
  {category: 'other', subcategory: 'two', value: 1},
];
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: data,
      key: 'value',
      groups: ['category', 'subcategory', 'value'],
      captions: {
        display: true,
        formatter(ctx) {
          return ctx.type === 'data' ? 'G: ' + ctx.raw.g : '';
        }
      },
    }]
  },
};
```

--------------------------------

### Setup

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/captions.md

Defines constants for grouping data and a helper function to capitalize the first letter of a string.

```javascript
// <block:setup:3>
const GROUPS = ['region', 'division', 'state'];
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
// </block:setup>
```

--------------------------------

### Datalabels plugin example

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/datalabels.md

This code snippet shows how to configure the datalabels plugin for a treemap chart. It includes setup for data, utility functions for coloring based on data values, and the chart configuration itself. The datalabels are configured to display automatically, anchored to the start, aligned at 45 degrees, and formatted to show the truncated integer value of the data. The font size is set to 20 and the color to white.

```javascript
// <block:setup:1>
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};
// </block:setup>

// <block:utils:2>
function colorFromRaw(ctx, border) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'purple';
  if (border) {
    alpha += 0.01;
  }
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}
// </block:utils>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderColor: (ctx) => colorFromRaw(ctx, true),
        borderWidth: 1,
        spacing: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
        datalabels: {
          display: 'auto',
          anchor: 'start',
          align: 45,
          formatter: (value) => Math.trunc(value.v),
          color: 'white',
          font: {
            size: 20
          }
        }
      }
    ],
  },
  options: {
    plugins: {
      datalabels: {
        display: true,
      }
    }
  }
};

// </block:config>

const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.tree = Utils.numbers(NUMBER_CFG);
      });
      chart.update();
    }
  },
];

module.exports = {
  actions,
  config,
};

```

--------------------------------

### Dividers Example

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/dividers.md

This code snippet shows how to configure a treemap chart with dividers enabled. It includes setup for the data, chart options, and the main configuration for the treemap dataset, specifically highlighting the `dividers` property.

```javascript
// <block:setup:3>
const data = [
  {category: 'main', value: 1},
  {category: 'main', value: 2},
  {category: 'main', value: 3},
  {category: 'other', value: 4},
  {category: 'other', value: 5},
];
// </block:setup>

// <block:options:2>
const options = {
  plugins: {
    title: {
      display: true,
      text: 'Using dividers'
    },
    legend: {
      display: false
    },
  }
};
// </block:options>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: data,
      key: 'value',
      groups: ['category'],
      borderWidth: 1,
      borderColor: 'rgba(200,200,200,1)',
      borderRadius: 10,
      backgroundColor: 'rgba(220,230,220,0.3)',
      hoverBackgroundColor: 'rgba(220,230,220,0.5)',
      dividers: {
        display: true,
        lineDash: [3, 5],
        lineWidth: 2,
      }
    }]
  },
  options: options
};

// </block:config>

module.exports = {
  config,
};

```

--------------------------------

### Treemap Dataset with Hierarchical Data

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/usage.md

Example of configuring a treemap dataset using hierarchical data with specified keys and groups.

```javascript
function colorFromRaw(ctx) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'green';
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}

const data = [
  {category: 'main', value: 1},
  {category: 'main', value: 2},
  {category: 'main', value: 3},
  {category: 'other', value: 4},
  {category: 'other', value: 5},
];

const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: data,
      key: 'value',
      groups: ['category'],
      backgroundColor: (ctx) => colorFromRaw(ctx),
    }]
  },
};

```

--------------------------------

### Treemap with Zoom Plugin

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/zoom.md

This code snippet demonstrates how to configure a treemap chart to enable zooming and panning using the Chart.js zoom plugin. It includes setup for data, utility functions for coloring based on values, and the chart configuration itself. It also defines actions for resetting the zoom.

```javascript
// <block:setup:1>
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};
// </block:setup>

// <block:utils:2>
function colorFromRaw(ctx, border) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'orange';
  if (border) {
    alpha += 0.01;
  }
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}
// </block:utils>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderWidth: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
        labels: {
          display: true,
          formatter: (ctx) => ctx.raw.v.toFixed(2),
          font: {
            size: 16
          },
          overflow: 'fit'
        }
      }
    ],
  },
  options: {
    plugins: {
      zoom: {
        zoom: {
          wheel: {
            enabled: true,
          }
        },
        pan: {
          enabled: true,
        }
      }
    }
  }
};

// </block:config>

const actions = [
  {
    name: 'Reset zoom',
    handler(chart) {
      chart.resetZoom();
    }
  },
];

module.exports = {
  actions,
  config,
};

```

--------------------------------

### Development Commands

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/README.md

Available commands for building, testing, and linting the project.

```bash
> npm run build         // build dist files
> npm run dev           // build and watch for changes
> npm test              // run all tests
> npm run lint          // perform code linting
> npm package           // create an archive with dist files and samples
```

--------------------------------

### Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/groups.md

Sets up the treemap chart configuration, including the dataset with tree data, key for area calculation, grouping, and styling.

```javascript
// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: Data.statsByState,
      key: 'area',
      groups: GROUPS,
      spacing: 1,
      borderWidth: 0.5,
      borderColor: 'rgba(200,200,200,1)',
      backgroundColor: 'rgba(220,230,220,0.3)',
      hoverBackgroundColor: 'rgba(220,230,220,0.5)',
    }]
  },
  options: options
};

// </block:config>
```

--------------------------------

### Tree Chart Options

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/tree.md

Configuration options for the tree chart, including title, legend, and tooltip callbacks.

```javascript
// <block:options:1>
const options = {
  plugins: {
    title: {
      display: true
    },
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        title(items) {
          const dataItem = items[0].raw;
          const obj = dataItem._data;
          return obj.name;
        },
      }
    }
  }
};
// </block:options>
```

--------------------------------

### Basic Treemap Chart

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/samples/basic.html

This code snippet shows how to create a basic treemap chart using Chart.js.

```javascript
function colorFromValue(value, border) {
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'purple';
  if (border) {
    alpha += 0.01;
  }
  return Chart.helpers.color(color)
    .alpha(alpha)
    .rgbString();
}

Utils.load(() => {
  const ctx2d = document.getElementById('chart-area').getContext('2d');
  window.myTreeMap = new Chart(ctx2d, {
    type: 'treemap',
    data: {
      datasets: [
        {
          label: 'Basic treemap',
          tree: [15, 6, 6, 5, 4, 3, 2, 2],
          backgroundColor(ctx) {
            const item = ctx.dataset.data[ctx.dataIndex];
            if (!item) {
              return;
            }
            return colorFromValue(item.v);
          },
          spacing: 0.1,
          borderWidth: 2,
          borderColor: 'rgba(180,180,180, 0.15)'
        }
      ]
    },
    options: {
      maintainAspectRatio: false,
      plugins: {
        title: {
          display: true,
          text: 'Basic treemap example'
        },
        legend: {
          display: false
        }
      }
    }
  });
});
```

--------------------------------

### Tree Chart Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/tree.md

The main configuration object for the tree chart, defining its type, data, and options.

```javascript
// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: Data.objectsTree,
      treeLeafKey: 'name',
      key: 'value',
      groups: [],
      spacing: 1,
      borderWidth: 0.5,
      borderColor: '#FF8F00',
      backgroundColor: 'rgba(255,167,38,0.3)',
      hoverBackgroundColor: 'rgba(238,238,238,0.5)',
      captions: {
        align: 'center'
      },
      labels: {
        display: true,
        formatter: (ctx) => {
          return ctx.raw.v;
        }
      }
    }]
  },
  options
};
// </block:config>

function toggle(chart) {
  const dataset = chart.data.datasets[0];
  if (dataset.groups.length) {
    dataset.groups = [];
  } else {
    dataset.groups = [0, 1];
    dataset.groups.push('name');
  }
  chart.update();
}

const actions = [
  {
    name: 'Toggle GroupBy',
    handler: (chart) => toggle(chart)
  }
];

module.exports = {
  actions,
  config,
};
```

--------------------------------

### Options

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/groups.md

Configures the chart's plugins, including the title, legend, and tooltip. The tooltip callbacks are customized to display group information and formatted values.

```javascript
// <block:options:2>
const options = {
  plugins: {
    title: {
      display: true,
      text: (ctx) => 'US area by ' + GROUPS.join(' / ')
    },
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        title(items) {
          return capitalizeFirstLetter(items[0].dataset.key);
        },
        label(item) {
          const dataItem = item.raw;
          const obj = dataItem._data;
          const label = obj.state || obj.division || obj.region;
          return label + ': ' + dataItem.v;
        }
      }
    }
  }
};
// </block:options>
```

--------------------------------

### Treemap Chart Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/samples/us-population.html

Configuration for a Chart.js treemap chart showing US population data, including data structure, styling, and tooltips.

```javascript
Utils.load(() => {
    const ctx2d = document.getElementById('chart-area').getContext('2d');
    window.myTreeMap = new Chart(ctx2d, {
        type: 'treemap',
        data: {
            datasets: [
                {
                    tree: statsByState,
                    key: 'population',
                    groups: ['region', 'division', 'code'],
                    backgroundColor(ctx) {
                        const item = ctx.dataset.data[ctx.dataIndex];
                        if (!item) {
                            return;
                        }
                        const a = item.v / (item.gs || item.s) / 2 + 0.5;
                        switch (item.l) {
                        case 0:
                            switch (item.g) {
                            case 'Midwest': return '#4363d8';
                            case 'Northeast': return '#469990';
                            case 'South': return '#9A6324';
                            case 'West': return '#f58231';
                            default: return '#e6beff';
                            }
                        case 1:
                            return Chart.helpers.color('white').alpha(0.3).rgbString();
                        default:
                            return Chart.helpers.color('green').alpha(a).rgbString();
                        }
                    },
                    spacing: 2,
                    borderWidth: 0.5,
                    borderColor: 'rgba(160,160,160,0.5)',
                    color: '#FFF',
                    hoverColor: '#F0B90B',
                    font: {
                        family: 'Tahoma',
                        size: 8,
                        style: 'bold'
                    },
                    hoverFont: {
                        family: 'Tahoma',
                        size: 8,
                        style: 'bold'
                    }
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'US Population by region/division/state'
                },
                legend: {
                    display: false
                },
                tooltip: {
                    callbacks: {
                        label(item) {
                            const dataset = item.dataset;
                            const dataItem = dataset.data[item.dataIndex];
                            return dataItem.g + ': ' + dataItem.v;
                        }
                    }
                }
            }
        }
    });
});
```

--------------------------------

### RTL Treemap Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/rtl.md

This code snippet shows the configuration for a treemap chart, including data structure, styling, and the `rtl` option to enable Right-to-Left layout.

```javascript
// <block:setup:3>
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
// </block:setup>

// <block:options:2>
const options = {
  plugins: {
    title: {
      display: true,
      text: (ctx) => 'RTL: ' + !!ctx.chart.data.datasets[0].rtl
    },
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        title(items) {
          return capitalizeFirstLetter(items[0].dataset.key);
        },
        label(item) {
          const dataItem = item.raw;
          const obj = dataItem._data;
          const label = obj.state || obj.division || obj.region;
          return label + ': ' + dataItem.v;
        }
      }
    }
  }
};
// </block:options>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: Data.statsByState,
      key: 'area',
      groups: ['state'],
      spacing: -0.5,
      borderWidth: 0.5,
      borderColor: 'rgba(200,200,200,1)',
      hoverBackgroundColor: 'rgba(220,230,220,0.5)',
      rtl: false
    }]
  },
  options: options
};

// </block:config>
function toggle(chart, group) {
  const idx = GROUPS.indexOf(group);
  if (idx === -1) {
    GROUPS.push(group);
  } else {
    GROUPS.splice(idx, 1);
  }
  chart.update();
}

const actions = [
  {
    name: 'Toggle RTL',
    handler: (chart) => {
      chart.data.datasets[0].rtl = !chart.data.datasets[0].rtl;
      chart.update();
    }
  },
];

module.exports = {
  actions,
  config,
};

```

--------------------------------

### Bundler Integration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/integration.md

How to load and register the chartjs-chart-treemap plugin using bundlers like Webpack or Rollup.

```javascript
import { Chart } from 'chart.js';
import {TreemapController, TreemapElement} from 'chartjs-chart-treemap';

Chart.register(TreemapController, TreemapElement);
```

--------------------------------

### Script Tag Integration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/integration.md

How to load the chartjs-chart-treemap plugin using script tags in plain JavaScript.

```html
<script src="path/to/chart.min.js"></script>
<script src="path/to/chartjs-chart-treemap.min.js"></script>
<script>
    let myChart = new Chart(ctx, {type: 'treemap', ...});
</script>
```

--------------------------------

### Toggle Function and Actions

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/groups.md

Provides a function to toggle groups and defines actions for toggling 'region', 'division', and 'state' groups.

```javascript
function toggle(chart, group) {
  const idx = GROUPS.indexOf(group);
  if (idx === -1) {
    GROUPS.push(group);
  } else {
    GROUPS.splice(idx, 1);
  }
  chart.update();
}

const actions = [
  {
    name: 'Toggle Region',
    handler: (chart) => toggle(chart, 'region')
  },
  {
    name: 'Toggle Division',
    handler: (chart) => toggle(chart, 'division')
  },
  {
    name: 'Toggle State',
    handler: (chart) => toggle(chart, 'state')
  },
];

module.exports = {
  actions,
  config,
};
```

--------------------------------

### Basic Treemap with Dividers

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/samples/dividers.html

This code snippet shows how to create a basic treemap chart with dividers enabled in Chart.js.

```javascript
Utils.load(() => {
    const ctx2d = document.getElementById('chart-area').getContext('2d');
    window.myTreeMap = new Chart(ctx2d, {
        type: 'treemap',
        data: {
            datasets: [
                {
                    label: 'Dividers',
                    tree: [
                        {category: 'main', value: 1},
                        {category: 'main', value: 2},
                        {category: 'other', value: 4},
                        {category: 'other', value: 4},
                    ],
                    key: 'value',
                    groups: ['category'],
                    spacing: 0.1,
                    borderWidth: 2,
                    borderColor: 'rgba(180,180,180, 0.15)',
                    dividers: {
                        display: true,
                        lineWidth: 2,
                        lineDash: [2, 3],
                    }
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'Basic treemap example'
                },
                legend: {
                    display: false
                }
            }
        }
    });
});
```

--------------------------------

### Chart Initialization and Data Loading

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/samples/us-switchable.html

This snippet initializes a Chart.js treemap chart with US state data. It configures the chart to display data based on a 'key' (initially 'area') and sets up event listeners for user interaction to switch the displayed metric and group data by region or division.

```javascript
Utils.load(() => {
    const ctx = document.getElementById('chart-area').getContext('2d');
    const tm = window.chart = new Chart(ctx, {
        type: 'treemap',
        data: {
            datasets: [
                {
                    tree: statsByState,
                    key: 'area',
                    groups: [],
                    spacing: -0.5,
                    borderWidth: 0.5,
                    borderColor: 'rgba(200,200,200,1)',
                    hoverBackgroundColor: 'rgba(220,230,220,0.5)',
                }
            ]
        },
        options: {
            maintainAspectRatio: false,
            plugins: {
                title: {
                    display: true,
                    text: 'US stats by state'
                },
                legend: {
                    display: false
                },
                tooltips: {
                    callbacks: {
                        title(item, data) {
                            return data.datasets[item[0].datasetIndex].key;
                        },
                        label(item, data) {
                            const dataset = data.datasets[item.datasetIndex];
                            const dataItem = dataset.data[item.index];
                            const obj = dataItem._data;
                            const label = obj.state || obj.division || obj.region;
                            return label + ': ' + dataItem.v;
                        }
                    }
                }
            }
        }
    });

    const sel = document.getElementById('data-key');
    sel.addEventListener('change', () => {
        tm.data.datasets[0].key = sel.value;
        tm.update();
    });

    function updateGroups() {
        const groups = tm.data.datasets[0].groups = [];
        let rtl = false;
        document.querySelectorAll('input:checked').forEach((cb) => {
            if (cb.value === 'rtl') {
                rtl = true;
            } else {
                groups.push(cb.value);
            }
        });
        tm.data.datasets[0].rtl = rtl;
        tm.update();
    }

    document.querySelectorAll('input[type="checkbox"]').forEach((cb) => {
        cb.addEventListener('change', () => {
            updateGroups();
        });
    });
});
```

--------------------------------

### Treemap Chart with Labels

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/labels.md

Configuration for a treemap chart showcasing custom label formatting and styling.

```javascript
// <block:setup:1>
const DATA_COUNT = 12;
const NUMBER_CFG = {count: DATA_COUNT, min: 2, max: 40};

const INTL_NUM_FORMAT = new Intl.NumberFormat('us', {
  style: 'unit',
  unit: 'kilometer',
  unitDisplay: 'short',
  minimumFractionDigits: 1,
  maximumFractionDigits: 1});

// </block:setup>

// <block:utils:2>
function colorFromRaw(ctx) {
  if (ctx.type !== 'data') {
    return 'transparent';
  }
  const value = ctx.raw.v;
  let alpha = (1 + Math.log(value)) / 5;
  const color = 'orange';
  return helpers.color(color)
    .alpha(alpha)
    .rgbString();
}

// </block:utils>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [
      {
        label: 'My First dataset',
        tree: Utils.numbers(NUMBER_CFG),
        borderColor: 'red',
        borderWidth: 0.5,
        spacing: 0,
        backgroundColor: (ctx) => colorFromRaw(ctx),
        labels: {
          align: 'left',
          display: true,
          formatter(ctx) {
            if (ctx.type !== 'data') {
              return;
            }
            return INTL_NUM_FORMAT.format(ctx.raw.v);
          },
          color: 'black',
          font: {
            size: 16,
          },
          hoverFont: {
            size: 24,
            weight: 'bold'
          },
          position: 'center'
        }
      }
    ],
  },
  options: {
    plugins: {
      title: {
        display: true,
        text: 'Labelling data'
      },
      legend: {
        display: false
      }
    }
  }
};

// </block:config>

const actions = [
  {
    name: 'Randomize',
    handler(chart) {
      chart.data.datasets.forEach(dataset => {
        dataset.tree = Utils.numbers(NUMBER_CFG);
      });
      chart.update();
    }
  },
];

module.exports = {
  actions,
  config,
};

```

--------------------------------

### Configuration

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/captions.md

Defines the treemap chart configuration, including data structure, key mapping, grouping, spacing, borders, colors, and importantly, the 'captions' plugin configuration for displaying text on chart elements.

```javascript
// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: Data.statsByState,
      key: 'area',
      groups: GROUPS,
      spacing: 1,
      borderWidth: 0.5,
      borderColor: 'rgba(200,200,200,1)',
      backgroundColor: 'rgba(220,230,220,0.3)',
      hoverBackgroundColor: 'rgba(220,230,220,0.5)',
      captions: {
        align: 'center',
        display: true,
        color: 'red',
        font: {
          size: 14,
        },
        hoverFont: {
          size: 16,
          weight: 'bold'
        },
        padding: 5
      },
      labels: {
        display: false,
        overflow: 'hidden'
      }
    }]
  },
  options: options
};
// </block:config>
```

--------------------------------

### Treemap Display Mode

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/displayMode.md

This code snippet shows how to configure a treemap chart with different display modes.

```javascript
// <block:setup:3>
let DISPLAY_MODE = 'containerBoxes';

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
// </block:setup>

// <block:options:2>
const options = {
  plugins: {
    title: {
      display: true,
      text: 'US area by division / state'
    },
    legend: {
      display: false
    },
    tooltip: {
      callbacks: {
        title(items) {
          return capitalizeFirstLetter(items[0].dataset.key);
        },
        label(item) {
          const dataItem = item.raw;
          const obj = dataItem._data;
          const label = obj.state || obj.division || obj.region;
          return label + ': ' + dataItem.v;
        }
      }
    }
  }
};
// </block:options>

// <block:config:0>
const config = {
  type: 'treemap',
  data: {
    datasets: [{
      tree: Data.statsByState,
      key: 'area',
      groups: ['division', 'state'],
      spacing: 2,
      borderWidth: 1,
      borderColor: 'rgba(200,200,200,1)',
      backgroundColor: (ctx) => {
        if (ctx.type !== 'data') {
          return 'transparent';
        }
        if (DISPLAY_MODE === 'containerBoxes') {
          return 'rgba(220,230,220,0.3)';
        }
        return ctx.raw.l ? 'rgb(220,230,220)' : 'lightgray';
      },
      displayMode: DISPLAY_MODE,
      captions: {
        padding: 6,
      },
    }]
  },
  options: options
};

// </block:config>
function toggle(chart, mode) {
  const dataset = {...config.data.datasets[0], displayMode: mode};
  DISPLAY_MODE = mode;
  chart.data.datasets = [dataset];
  chart.update();
}

const actions = [
  {
    name: 'Container Boxes',
    handler: (chart) => toggle(chart, 'containerBoxes')
  },
  {
    name: 'Header Boxes',
    handler: (chart) => toggle(chart, 'headerBoxes')
  },
];

module.exports = {
  actions,
  config,
};

```

--------------------------------

### Actions

Source: https://github.com/kurkle/chartjs-chart-treemap/blob/main/docs/samples/captions.md

Defines an action to toggle the display of labels on the chart elements.

```javascript
const actions = [
  {
    name: 'Toggle labels',
    handler(chart) {
      const labels = chart.data.datasets[0].labels;
      labels.display = !labels.display;
      chart.update();
    }
  }
];

module.exports = {
  config,
  actions
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.