Groups

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 };

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
};

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; } } } } };

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;
        }
      }
    }
  }
};

const GROUPS = ['region']; function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1); }

const GROUPS = ['region'];
function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}