Styled Venn Diagram

Code

config

export const config: ChartConfiguration<'venn'> = {
  type: 'venn',
  data: {
    labels: data.labels,
    datasets: [
      {
        ...data.datasets[0],
        backgroundColor: 'blue',
        borderColor: 'red',
        borderWidth: 10,
      },
    ],
  },
  options: {
    layout: {
      padding: 10,
    },
    plugins: {
      legend: {
        display: false,
      },
    },
    scales: {
      x: {
        ticks: {
          color: 'white',
          font: {
            size: 20,
          },
        },
      },
    },
  },
};

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