4.1 Base Styles

If base styles or any rule based styles are not defined (or applied), then the following default base styles are applied to the graph:

const border = {
  width: 1,
  color: '#404040'
};

const badge = {
  size: 6,
  color: '#FF584A',
  label: {
    text: '${group.size}',
    angle: null,
    color: 'white',
    font: {
      weight: 'bold'
    }
  }
};

const defaults: Styles = {
  '*': {
    filter: 'none',
    label: {
      maxLength: 15,
      font: {
        size: 10
      }
    }
  },
  vertex: {
    size: 8,
    color: 'lightgray',
    image: {
      scale: 1
    },
    border,
    icon: {
      color: 'white'
    },
    label: {
      angle: 270,
      d: 2
    }
  },
  'vertex:group': {
    size: '${interpolate("group.size", 8, 16)}',
    opacity: 1,
    color: '#75BBF0',
    border,
    label: {
      text: '',
      angle: 270,
      d: 2
    },
    icon: null,
    image: null,
    legend: null,
    children: {
      size: badge
    }
  },
  edge: {
    width: 2,
    color: '#C0C0C0',
    label: {
      position: 0,
      d: 1
    }
  },
  'edge:group': {
    width: 2,
    opacity: 1,
    label: null,
    children: {
      size: badge
    }
  },
  '* > *': {
    size: 5,
    d: 0,
    color: 'darkgray',
    border: null,
    icon: {
      color: 'white'
    },
    image: {
      scale: 1
    },
    label: {
      d: 1
    }
  },
  'vertex > *': {
    angle: 45
  },
  'edge > *': {
    position: 0
  },
  ':unselected': {
    filter: 'grayscale(100%)'
  },
  'vertex:unselected': {
    opacity: 0.3
  },
  'edge:unselected': {
    opacity: 0.3
  },
  'vertex:hover': {
    size: '${previous + 4}'
  },
  'edge:hover': {
    width: '${previous + 2}'
  },
  'edge:hover > *': {
    size: '${previous + 2}'
  }
};

If you wish to create a custom base style, then you can provide your own settings.baseStyles, which overrides the defaults shown in the preceding code.

The following shows an usage example to create a custom base style that applies for all vertices and edges:

Note:

The Graph Visualization library also contains TypeScript definitions if you are using TypeScript).

// This import is not necessary if you are using Oracle JET.
import '@ovis/graph/alta.css';
import Visualization from '@gvt/graphviz';

const vertices = [
  {
    id: 1,
    properties: {
      label: 'blue',
      name: 'Hello'
    },
    labels: ['color']
  },
  {
    id: 2,
    properties: {
      label: 'blue',
      name: 'World'
    },
    labels: ['color']
  },
  {
    id: 3,
    properties: {
      name: 'Some Name'
    },
    labels: ['text']
  }
];

const edges = [
  {
    id: 1,
    source: 1,
    target: 2,
    labels: ['edge']
  },
  {
    id: 2,
    source: 2,
    target: 3,
    labels: ['edge']
  }
];

const settings = {
  baseStyles: {
    vertex: {
      label: { text: '${properties.name}' }
    }
  }
};

new GraphVisualization({
  target: document.body,
  props: { data: { vertices, edges }, settings }
});

The following shows the graph visualization using the preceding custom base style:

Figure 4-1 Using a Custom Base Style

Description of "Figure 4-1 Using a Custom Base Style"