Background gradient vis.js

70 views Asked by At

I use vis.js 9.1.6 I want nodes have background-gradient is this possible?

This is my option

const options = {
  edges: {
    width: 2,
    selectionWidth: 0,
    hoverWidth: 0,
    smooth: false,
    arrows: {
      to: {
        enabled: true,
        scaleFactor: 0.7,
      },
    },
    chosen: false,
    color: {
      color: "black",
      highlight: "black",
      hover: "black",
    },
  },

  nodes: {
    fixed: { x: true, y: true },
    borderWidth: 2,
    borderWidthSelected: 3,
    shape: "box",
    margin: { top: 15, right: 30, bottom: 15, left: 30 },
    color: {
      border: "black",
      background: "white",
    },
    font: {
      size: 20,
    },
  },
  groups: Groups,
  interaction: {
    hover: false,
    hoverConnectedEdges: false,
    selectConnectedEdges: false,
    zoomView: true,
    tooltipDelay: 100,
  },

  physics: {
    enabled: false,
    solver: "repulsion",
  },
  layout: {
    randomSeed: undefined,
    improvedLayout: false,
  },
  manipulation: {
    enabled: false,
  },
};

and also this is my groups

const Groups = {
  default: {
    color: {
      border: "#000000",
      background: "#ffffff",
    },
    font: { color: "#000000" },
  },
  semester1: {
    color: {
      border: "#d1a61a",
      background: "#FFC300",
    },
    font: {
      color: "white",
    },
  },
  semester2: {
    color: {
      border: "#cc2400",
      background: "#FF5733",
    },
    font: {
      color: "white",
    },
  },
}

I try some ways like this

const nodes = new DataSet([
  { id: 1, label: 'Node 1', color: { background: { gradient: ['#00FF00', '#0000FF'] } } },
  { id: 2, label: 'Node 2', color: { background: { gradient: ['#FF0000', '#FFFF00'] } } }
]);

and tried to change with .css but it does not work.

0

There are 0 answers