# Fonts and colors

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
      }
    }
  }
};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
      }
    }
  }
};
← Labels Groups →