DevExtreme - Charts - Annotations (v19.1)

30 April 2019

DevExtreme Charts just got even more powerful: We added support for chart annotations in our v19.1 release. Using the new features, you can display text or image annotations on the chart surface, and anchor them to various different types of locations.

The new functionality described in this post is available on all platforms supported by DevExtreme, including Angular, Vue, React, jQuery and ASP.NET MVC and ASP.NET Core.

DevExtreme Chart Annotations

There are two types of annotations: image and text. You can see both in the image above. Annotations can be styled using a range of visual parameters. The most important concept, however, is that of anchoring: annotations are positioned on the chart surface, often in relation to other chart elements.

The Origin annotation in the image is defined using this code:

{
  type: 'text',
  text: 'Origin',
  series: 'sine'
  argument: 0,
  color: '#c7ffc4',
}

For anchoring purposes, the parameters series and argument are the important ones. The argument relates to the argument value of the chart datasource (i.e. the horizontal axis). Without a series parameter, the annotation would point at the axis value itself, but since the series name is given in the example, the annotation is placed near the series point for the given argument.

The red annotation in the example uses these parameters:

{
  ...
  value: -0.5877852522924732,
  argument: -2.5132741228718345,
  ...
}

These are values taken from the chart datasource, so the annotation points precisely at the related series point. However, you can place an annotation anywhere you want using argument and value pairs – they are interpreted as coordinates related to the value ranges of the chart.

Finally, here’s the code for the illustrative image (courtesy of Stephan Kulla and Wikipedia) in the top-right corner of the chart:

{
  type: 'image',
  image: {
    url: '...',
    width: 150,
    height: 150
  },
  x: 800,
  y: 100,
  border: {
    color: '#bbbbbb',
    width: 2
  },
  shadow: {
    blur: 8,
    opacity: 0.4
  },
  paddingLeftRight: 3,
  paddingTopBottom: 3
}

Positioning is absolute in this case, using the x and y parameters. The additional options illustrate some of the visual styling features supported by chart annotations.

At least one cool feature is not shown in the image above: Tooltip support

Try It Now

If you’d like to test this feature, you can do so right now using the public beta version. Use the npm pre-release package:

npm install --save devextreme@19.1-next

Documentation is available here: annotations, commonAnnotationSettings, customizeAnnotation

Future Plans

For v19.2 we are working on a custom annotation type using templates, as well as dragging support for annotations.

What Do You Think?

We would love to hear from you. If you have any questions or suggestions, please consider posting them to this github issue for discussion. Of course you can also comment below or open Support Center tickets.

Join The Webinar

If you’d like to see all the new features introduced in v19.1, please sign up for our upcoming webinar using this link: Sign Up For DevExtreme v19.1 Webinar

3 comment(s)
Manuel Haas (TS)

Werden diese neuen Funktionalitäten auch für Knockout zur Verfügung stehen? Oder wird Knockout mit v19 nicht mehr unterstützt?

1 May, 2019
Oliver Sturm (DevExpress)

Manuel - keine Sorge, Knockout funktioniert noch wie in der Vergangenheit! Hier ist die Doku für v19.1: js.devexpress.com/.../Create_and_Configure_a_Widget

2 May, 2019
Manuel Haas (TS)

Hi Oliver, vielen Dank für die Info. Bin erleichtert! Und sorry für die Verwendung von DE, da hat mich wohl dein Name dazu verleitet ;-)

3 May, 2019

Please login or register to post comments.