Data Limits

You can customize the scale limit the the minimal and maximal values independently. There are three common choices:

• data limits (default) ... the minimal and maximal values of the data are the scale limits
• whiskers ... the minimal and maximal values are the whisker endpoints
• box ... the minimal and maximal values are the box endpoints q1 (25% quantile) and q3 (75% quantile)

Data Limits

Code

config

export const minmax: ChartConfiguration<'boxplot'> = {
  type: 'boxplot',
  data,
  options: {
    minStats: 'min',
    maxStats: 'max',
  },
};

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),
      ],
    },
  ],
};

Whiskers

Code

config

export const whiskers: ChartConfiguration<'boxplot'> = {
  type: 'boxplot',
  data,
  options: {
    minStats: 'whiskerMin',
    maxStats: 'whiskerMax',
  },
};

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),
      ],
    },
  ],
};

Box

Code

config

export const box: ChartConfiguration<'boxplot'> = {
  type: 'boxplot',
  data,
  options: {
    minStats: 'q1',
    maxStats: 'q3',
  },
};

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),
      ],
    },
  ],
};