Highlight annotations

Highlight

Annotations can be highlighted dynamically by hovering or clicking on them, but also through a function call on the annotationText object.

With the highlight function you can highlight annotations by their ID, it will take the same colors as the hover with mouse. When hovering over an annotation, it will override the highlighted state.

const annotatedText = createAnnotatedText(id)
  .setText(text)
  .setAnnotations(textAnnotations);

annotatedText.highlight(['annotation-id-1', 'annotation-id-2']);

Select

selectAnnotations works the same as highlight, but it will use the selected colors.

const annotatedText = createAnnotatedText(id)
  .setText(text)
  .setAnnotations(textAnnotations);

annotatedText.selectAnnotations(['annotation-id-1', 'annotation-id-2']);

Example

Default display renderer (highlight)

Underline display renderer