Examples

BoxPlot

Code

config

export const config: ChartConfiguration<'boxplot'> = {  type: 'boxplot',  data, };

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

Violin Plot

Code

config

export const config: ChartConfiguration<'violin'> = {  type: 'violin',  data, };

data

export 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<'violin'>['data'] = {  labels: ['A', 'B', 'C', 'D'],  datasets: [  {  label: 'Dataset 1',  data: [  randomValues(100, 0, 100),  randomValues(100, 0, 20, [80]),  randomValues(100, 20, 70),  // empty data  [null as unknown as number],  ],  },  {  label: 'Dataset 2',  data: [  randomValues(100, 60, 100, [5, 10]),  randomValues(100, 0, 100),  randomValues(100, 0, 20),  randomValues(100, 20, 40),  ],  },  ], };