Property Value Formats

Use settings.propertyFormats to control how number and date properties are displayed in graph captions and tooltips. Each rule applies to one element type, one exact label set, and one property. When more than one rule matches, the rule with the most labels is used.

In the Graph Visualization extension for VS Code, create and manage these rules from General Settings > Property Formats. The available properties come from the graph schema and are limited to number and date values. Number rules offer the same JavaScript locales as date rules, including English (United States, United Kingdom, and India), German, Spanish, French, Italian, Japanese, Korean, Portuguese (Brazil), Swedish, and Chinese (China). The default locale uses the locale of the environment running the visualization.

For date rules, select a locale to use JavaScript’s locale-aware date formatting. Select Custom to show the date-format input and enter a pattern using the supported YYYY, MM, DD, HH, mm, and ss tokens.

const settings = {
  propertyFormats: [
    {
      elementType: 'vertex',
      labels: ['Employee'],
      property: 'salary',
      type: 'number',
      locale: 'en-US',
      style: 'currency',
      currency: 'USD',
      decimals: 2
    },
    {
      elementType: 'vertex',
      labels: ['Person'],
      property: 'birthDate',
      type: 'date',
      dateFormat: 'DD/MM/YYYY'
    },
    {
      elementType: 'edge',
      labels: ['Transfer'],
      property: 'amount',
      type: 'number',
      locale: 'en-IN',
      prefix: '₹ '
    }
  ]
};

Configured values are formatted before label truncation, so the visible label and its tooltip use the same display value. A caption format applies only when the effective caption is a direct property expression, such as ${properties.salary}. A higher-priority literal caption does not inherit a lower-priority property format; a ${previous} caption retains the prior property format. Values without a matching rule keep the existing display response.