Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

To add a Target, click the ‘Add’ icon beneath the colour palette.

Info

The screenshot below shows the Target configuration for most chart types, however from the May 2023 release, Targets can now be added to Card Charts.

The Card Chart configuration panel has an additional field. More information about how Targets work with Card Charts can be found in Card Chart Specific Targets section below.

...

The Target can represent a range of numbers for example, 100 to 200 or can represent a single value e.g., 100. If you specify a different number in the From and To fields, a target area, similar to an Area chart, will be created on the chart. If you specify the same value in the From and To fields, a target line will be created on the chart, similar to a Line chart. 

...

Negative Infinity - This option will extend the target line to the very bottom of the chart 

Have a look at our video on Target Lines.

Card Chart Specific Targets

Info

Introduced from the May 23 release

Targets have been added to Card Charts in order to allow conditional styling to be applied. Any Targets defined will set the default colours for both the background (as with other chart types) and the text (new, Card Chart exclusive functionality). These defaults will apply to all elements of the Card Chart but that does not mean that the colour of the entire chart has to governed by them. Any elements that have a background and/or text colour defined for them will no longer dynamically respond based upon targets. This, combined with the ability to add margins to the Body and Footer sections of the Card Chart, means that the Target dictated proportion of a Card Chart can range from the entirety of it to single text elements or subtle strips.

Setting the colour of the text

Setting the text colour is almost identical to that of setting the background. When adding a target to a Card Chart a new field will be shown beneath the ‘Color' field labelled ‘Text Color’. Whilst the ‘Color’ field defaults to the currently selected colour in the picker above, the text colour will default to Black or White depending upon its shade instead. Other than that, the colour can be changed and its value copied in an identical fashion to the other field.

How Targets affect the elements of a Card Chart

Only the first Measure of a Card Chart can be evaluated against the Targets with its value dictating which Target is active and therefore what background and text colour should be set as the default for the chart. This default colour applies to the whole chart but is overridden by any values set upon the Body or Footer sections of the Card Chart or individual elements of it such as text. If the current Measure value does not satisfy any of the Targets set, then the chart will use the colours defined in the active theme.

If there is an overlap between two Targets the colours will reflect that of the one most recently defined. The Targets are listed from oldest to newest on the Target section of the Chart Editor so those lower on the list will take priority over those above them.

The Sparkline and how it affects Targets and data presentation

Sparklines are not new to Card Charts but their interaction with Targets and the data that the Card Chart presents is somewhat different to those of other Chart Types. Hovering over different points of the Sparkline will dynamically update the data the Card Chart is basing its presentation on as before but there are a few key differences:

  • Targets extend slightly beyond the confines of the Sparkline creating an area that whilst filled with the area charts representing the Targets has no associated Measure data. When hovering over these areas, the Card Chart will base its presentation upon either the first point of data or the last point of data depending on whether you are on the left-hand or right-hand side of the Sparkline respectively

  • When hovering over a point along a Target rather than a point on the Sparkline itself, the tooltip will display information about the target whilst the Card Chart itself will present as if the Measure data that is in-line with this point were activated

Essentially, the differences above are to ensure that the data values shown within the chart are always related to the Sparkline and associated Dimension/Measure rather than aspects of the Targets.

Elementor macro
rowWidth100
title77ssh9
content[{"id":"dzy4z5","order":1662385224983,"background":{"source":"color","value":"#ffffff","id":""},"backgroundOverlay":{"isActive":false,"color":"#000000","opacity":0.5},"rows":[{"id":"ygsuw3","order":1662385224983,"type":"one","columns":[{"id":"tbwr2d","order":1,"alignment":{"vertical":"center","horizontal":"center"},"macro":{"id":"pagedivider","dividerColor":"#8d135bff","text":"Related Topics","fontSize":24,"textAlignment":"center","dividerWidth":100,"dividerWeight":3,"dividerType":"text-only","dividerIcon":"atlaskit/StarFilledIcon","textColor":"#8d135bff","iconColor":"#000","labelPosition":"middle","emojiEnabled":"false","emoji":{"id":"smile","name":"Smiling Face with Open Mouth and Smiling Eyes","short_names":["smile"],"colons":":smile:","emoticons":["C:","c:",":D",":-D"],"unified":"1f604","skin":null,"native":"😄"}}},{"id":"d6qgd","order":2,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}},{"id":"ase0ze","order":3,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}},{"id":"6uwnf8","order":4,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}}]},{"id":"3fjcjk","order":1662385261669,"type":"one","columns":[{"id":"a5cmoq","order":1,"alignment":{"vertical":"center","horizontal":"center"},"macro":{"id":"pages","type":"list","layout":"four","loadType":"manual","parentPage":"204636391","manualPages":[{"id":"a07yme","position":0,"contentId":"1167327260"},{"id":"jo7x0l","position":1,"contentId":"1167851593"},{"id":"maubzl","position":2,"contentId":"1167556661"}],"labels":[],"spaces":[],"contributors":[],"numberOfItems":8,"pagination":"infinite"}},{"id":"gsicqq","order":2,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}},{"id":"cogkxe","order":3,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}},{"id":"f8nmi","order":4,"alignment":{"vertical":"center","horizontal":"center"},"macro":{}}]}]}]