Data Structures

BoxPlot and Violin Plots can be defined in two ways: Either given a raw array of values or as an object of precomputed values.

BoxPlot

Code

config

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

data

const data: ChartConfiguration<'boxplot'>['data'] = {
  labels: ['array', '{boxplot values}', 'with items', 'as outliers'],
  datasets: [
    {
      label: 'Dataset 1',
      borderWidth: 1,
      itemRadius: 2,
      itemStyle: 'circle',
      itemBackgroundColor: '#000',
      outlierBackgroundColor: '#000',
      data: [
        [1, 2, 3, 4, 5, 11],
        {
          min: 1,
          q1: 2,
          median: 3,
          q3: 4,
          max: 5,
        },
        {
          min: 1,
          q1: 2,
          median: 3,
          q3: 4,
          max: 5,
          items: [1, 2, 3, 4, 5],
        },
        {
          min: 1,
          q1: 2,
          median: 3,
          q3: 4,
          max: 5,
          outliers: [11],
        },
      ],
    },
  ],
};

Violin Plot

Code

config

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

data

const data: ChartConfiguration<'violin'>['data'] = {
  labels: ['array', '{violin values}', 'with items', 'as outliers'],
  datasets: [
    {
      label: 'Dataset 1',
      borderWidth: 1,
      itemRadius: 2,
      itemStyle: 'circle',
      itemBackgroundColor: '#000',
      outlierBackgroundColor: '#000',
      data: [
        [1, 2, 3, 4, 5, 11],
        {
          median: 4,
          maxEstimate: 10,
          coords: [
            { v: 0, estimate: 0 },
            { v: 2, estimate: 10 },
            { v: 4, estimate: 6 },
            { v: 6, estimate: 7 },
            { v: 8, estimate: 0 },
          ],
        },
        {
          median: 4,
          maxEstimate: 10,
          coords: [
            { v: 0, estimate: 0 },
            { v: 2, estimate: 10 },
            { v: 4, estimate: 6 },
            { v: 6, estimate: 7 },
            { v: 8, estimate: 0 },
          ],
          items: [1, 2, 3, 4, 5],
        },
        {
          median: 4,
          maxEstimate: 10,
          coords: [
            { v: 0, estimate: 0 },
            { v: 2, estimate: 10 },
            { v: 4, estimate: 6 },
            { v: 6, estimate: 7 },
            { v: 8, estimate: 0 },
          ],
          outliers: [11],
        },
      ],
    },
  ],
};