Skip to content

Cookie preferences

We use cookies for our own analytics, to see how our campaigns perform and, if you allow it, to load content from other services such as the Google site search. We never sell your data. Necessary cookies keep the site working and cannot be switched off. See our Cookie Policy for details and our Privacy Policy for how we handle personal data.

Security, load balancing and remembering your cookie choice.

Show us which pages people read and how they find the site, so we can improve it (Google Analytics).

Show us which of our ad campaigns bring visitors to the site and remember the campaign or partner link you arrived from (Google Ads, partner program). We do not use these cookies to build advertising profiles.

Load the site search from Google when you use it. Google sets its own cookies and shows ads in the search results.

© 2026 The ThingsBoard Authors
22.5k Try for free

ThingsBoard Cloud

Choose your data region

Your data stays in the region you choose, for residency and compliance. No credit card required.

Rather run it yourself? Install on your own servers

Card with Line Chart

The Card with Line Chart widget displays a single key metric alongside a sparkline showing its trend over time. You can also compare the current value with the previous equivalent period to see whether the metric is improving or declining.

Drop the field you want to monitor into the Value column and select an aggregation type. The card shows the aggregated result for the current time range with a line chart reflecting the trend.

Enable comparison to show how the current value differs from the corresponding previous period. For example, if the selected time range is the last 7 days, the card compares the current 7-day total against the previous 7-day total.

  1. Open Settings and enable Enable comparison.

  2. Click Build Report.

The card shows the percentage difference between the two periods. The line chart displays both periods overlaid so you can see the dynamics side by side.

By default, a negative change is shown in red (warning) and a positive change in green. If a lower value is the desired outcome — for example, reduced energy consumption — invert this convention.

  1. Open Settings and enable Reverse comparison colors.

  2. Click Build Report.

For fine-grained control, define explicit value ranges with individual colors for normal, warning, and dangerous states.

  1. Open the field settings and set the minimum and maximum boundaries for each range.

  2. Click Build Report.

When custom ranges are configured, the Reverse comparison colors setting is ignored — the range definitions take precedence.