Venn Diagram Labels

Code

config

export const config: ChartConfiguration<'venn'> = {
  type: 'venn',
  data,
  options: {
    scales: {
      x: {
        ticks: {
          font: {
            family: 'Arial',
            size: 18,
          },
          color: 'green',
        },
      },
      y: {
        ticks: {
          font: {
            family: 'Arial',
            size: 20,
          },
          color: 'red',
        },
      },
    },
  },
};

data

import type { ChartConfiguration } from 'chart.js';
import { Chart } from 'chart.js';
import { extractSets } from '../../src';

// #region data

export const data: ChartConfiguration<'venn'>['data'] = extractSets(
  [
    { label: 'Soccer', values: ['alex', 'casey', 'drew', 'hunter'] },
    { label: 'Tennis', values: ['casey', 'drew', 'jade'] },
    { label: 'Volleyball', values: ['drew', 'glen', 'jade'] },
  ],
  {
    label: 'Sports',
  }
);

// #endregion

// #region config
export const config: ChartConfiguration<'venn'> = {
  type: 'venn',
  data,
};
// #endregion config