Making a Violin Chart with precomputed values

[LVerneyPEReN]

Hi,

Similar to #22, I am trying to render a ViolinChart from precomputed values.

BoxPlot works very nice with the Object data structure, but I cannot get ViolinChart to work. Would you have some example or directions?

Actually, from https://github.com/sgratzl/chartjs-chart-boxplot/blob/main/src/data.ts#L219-L222 I'm not even sure it is possible to bypass this computation?

Thanks!

[sgratzl]

it should work if you provide all the required fields according to this interface:

[LVerneyPEReN]

@sgratzl Thanks, it works indeed! I was passing strictly IViolin data, but was missing median which is necessary for some reason (unclear to me).

Additional issue was that I was trying to plot both violin data and boxplot, which requires careful handling of types.

For anyone looking to do the same, here is an example snippet:

const boxplotData = {
  labels: ['toto'],
  datasets: [{
    type: 'violin',
    data: [
      {
        median: 50,
        maxEstimate: 10,
        coords: [
          {v: 0, estimate: 0},
          {v: 25, estimate: 10},
          {v: 50, estimate: 3},
          {v: 75, estimate: 7},
          {v: 100, estimate: 0},
        ]
      }
    ]
  }, {
    type: 'boxplot',
    data: [
      {
        min: 0,
        max: 100,
        q1: 25,
        q3: 75,
        median: 50,
        mean: 50,
        items: [],
        outliers: [],
      }
    ]
  }]
};
window.onload = () => {
  const ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    data: boxplotData,
  });
};

[sgratzl]

re median: the diamond shape in the middle of the violin plot shows the median value

[LVerneyPEReN]

re median: the diamond shape in the middle of the violin plot shows the median value

Sure, but as I was plotting boxplot + violin on the same graph, I thought I could skip the median value in the violinplot, which would simply not draw the diamond shape (instead of having it twice, once from boxplot and once from violin).

[VladiGGeorgiev]

@sgratzl Thanks, it works indeed! I was passing strictly IViolin data, but was missing median which is necessary for some reason (unclear to me).

Additional issue was that I was trying to plot both violin data and boxplot, which requires careful handling of types.

For anyone looking to do the same, here is an example snippet:

const boxplotData = {
  labels: ['toto'],
  datasets: [{
    type: 'violin',
    data: [
      {
        median: 50,
        maxEstimate: 10,
        coords: [
          {v: 0, estimate: 0},
          {v: 25, estimate: 10},
          {v: 50, estimate: 3},
          {v: 75, estimate: 7},
          {v: 100, estimate: 0},
        ]
      }
    ]
  }, {
    type: 'boxplot',
    data: [
      {
        min: 0,
        max: 100,
        q1: 25,
        q3: 75,
        median: 50,
        mean: 50,
        items: [],
        outliers: [],
      }
    ]
  }]
};
window.onload = () => {
  const ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx, {
    data: boxplotData,
  });
};

I am trying to visualize violin plot even with the same sample values, but it does not show on the chart. Only the boxplot shows.

[sgratzl]

cannot reproduce, it looks correct to me: