const cy = cytoscape({
  container: document.getElementById('app'),
  elements: [
    {
      data: {
        id: 'a',
        value: Math.random(),
        values: Array(100)
          .fill(0)
          .map(() => Math.random()),
      },
    },
    {
      data: {
        id: 'b',
        value: Math.random(),
        values: Array(100)
          .fill(0)
          .map(() => Math.random()),
      },
    },
    {
      data: {
        id: 'ab',
        source: 'a',
        target: 'b',
      },
    },
  ],
});
cy.overlays(
  [
    {
      position: 'top',
      vis: CytoscapeOverlays.renderBar('value', {
        backgroundColor: 'steelblue',
      }),
    },
    {
      vis: CytoscapeOverlays.renderBoxplot('values', {
        backgroundColor: 'darkred',
      }),
    },
    {
      vis: CytoscapeOverlays.renderHistogram('values', {
        backgroundColor: 'darkgreen',
      }),
    },
  ],
  {
    updateOn: 'render',
    backgroundColor: 'white',
  }
);