Data Points

the individual data points can be displayed by setting the itemRadius to a value larger than 0. They are jittered randomly to support larger quantities.

Code

config

export const config: ChartConfiguration<'boxplot'> = {
  type: 'boxplot',
  data,
  options: {
    elements: {
      boxandwhiskers: {
        itemRadius: 2,
        itemHitRadius: 4,
      },
    },
  },
};

data

function randomValues(count: number, min: number, max: number, extra: number[] = []): number[] {
  const delta = max - min;
  return [...Array.from({ length: count }).map(() => Math.random() * delta + min), ...extra];
}

export const data: ChartConfiguration<'boxplot'>['data'] = {
  labels: ['A', 'B', 'C', 'D'],
  datasets: [
    {
      label: 'Dataset 1',
      data: [
        randomValues(100, 0, 100),
        randomValues(100, 0, 20, [110]),
        randomValues(100, 20, 70),
        // empty data
        [],
      ],
    },
    {
      label: 'Dataset 2',
      data: [
        randomValues(100, 60, 100, [5, 10]),
        randomValues(100, 0, 100),
        randomValues(100, 0, 20),
        randomValues(100, 20, 40),
      ],
    },
  ],
};