Entities – KronoGraph Docs

Entities

Entity Styling

Entities run horizontally on the timeline and are shown when they have an associated event in the visible time range.

Customize and style your entities with the properties in the Entity object. Here the first entity has all the default properties and the second entity has some custom properties set:

Entities Example 1

const entities = {
  'Default Entity Style': {},
  'Custom Entity Style': {
    color: '#c9477b',
    lineWidth: 5,
    labelColor: '#ffd88f',
    glyph: true,
    fadeOutsideRange: true,
  },
},

Try out some of the properties in the Styling Entities story.

Entity Types

If you have a number of entities that you want to customize in the same way, use the EntityType object and then assign a type to the Entity. Each entity can only have one type.

In these examples, we are using a subset of the "Bigfoot Sightings" data from the Bigfoot Field Researchers Organization (BFRO). Here, the numbered sightings are organized into types by State. Each State has its own EntityType where the entity color is set.

There is an assigned order for the California and Colorado entity types. The order property allows you to control the sequence of entity types on the timeline.

Default

This is an example of how the entityTypes are shown in the data:

const entityTypes = {
  "California": {
    "color": "#e9d8a6",
    "order": 1
  },
  "Connecticut": {
    "color": "#94d2bd"
  },
  "Colorado": {
    "color": "#EE9B00",
    "order": 0
  }
}

This is how the entityTypes are assigned to the entities using the type property:

const entities = {
  "7211": {
    "type": "California"
  },
}

See types in use in the Styling Items by Type story.

Entity Base Types

Entity types can inherit properties from a baseType. In this example, each entity has a type based on its classification. "Class A" and "Class B" set the labelColor and the entity color is inherited from the "California" entity type.

Default

const entities = {
  "7555": {
    "type": "Class A"
  }
}

const entityTypes = {
  "California": {
    "color": "#62b6cb",
  },
  "Class B": {
    "labelColor": "#f9c74f",
    "baseType": "California"
  },
  "Class A": {
    "labelColor": "#90be6d",
    "baseType": "California"
  },
  "Class C": {
    "baseType": "California"
  }
}

See the Inherited Styles story for more details.

Default Entity Type

It's possible to specify entity properties using the default entity type:

  const entityTypes = {
    default: {
      color: '#EE9B00',
      lineWidth: 5,
      labelColor: '#EE9B00',
    },
  },

Any entity that doesn't have these properties set will inherit them from the default entity type.

Note the default type cannot have a baseType.

Entity Groups

Further organize entities in the timeline using groupBy to create as many nested levels as needed. Here all the entities have the type as "State" and are grouped by "season" and "classification".

Default

The groupBy property is set within the entityType:

const entityTypes = {
  "California": {
    "color": "#e9d8a6",
    "groupBy": [
      "season",
      "classification"
    ]
  },
}

The "season" and "classification" are set within the data object for each entity:

const entities = {
  "14338": {
    "data": {
      "season": "Fall",
      "classification": "Class A"
    },
    "type": "California"
  },
}

For more details on groups, see the Groups story.

Glyphs

Glyphs are circles displayed alongside entity and entity type labels. They're especially useful for adding extra meaning to your labels or for highlighting certain entities or entity types. You can also style them with custom colors or font icons.

Glyph Example

Use the following APIs to add glyphs to your timeline:

Entity labels using Entity.glyph.
Entity type labels using EntityType.typeGlyph.
All entity labels within an entity type using EntityType.glyph.

const entityTypes: {
  Customer: {
    typeGlyph: {
      color: '#943651',
      fontIcon: {
        fontFamily: 'Font Awesome 6 Free',
        fontWeight: 100,
        text: '\u{f256}',
      },
    },
  },
  'Sales Person': {
    glyph: {
      color: '#FFCD00',
      fontIcon: {
        fontFamily: 'Font Awesome 6 Free',
        fontWeight: 900,
        text: '\u{f53a}',
      },
    },
  },
},
const entities: {
  'smith-johnathan-151': {
    label: 'John Smith',
    type: 'Customer',
    color: '#E32F42',
  },
  'west-josephine-126': {
    label: 'Josephine West',
    color: '#FF7A4F',
    glyph: true,
    type: 'Customer',
  },
  'roberts-nathaniel-023': {
    label: 'Nathan Roberts',
    color: '#00AFB9',
    type: 'Sales Person',
  },
  'baxter-eleanor-004': {
    label: 'Ella Baxter',
    color: '#0077B6',
    type: 'Sales Person',
  },
},

Glyphs inherit the color of the entity or entity type that they are applied to unless you assign a color via the Glyph object.

The position of glyphs in relation to the entity label or entity type label is controlled globally via the glyphPosition option.

For more ideas take a look at the Styling Glyphs story.