diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-calendar-axis.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-calendar-axis.js
index 56eb672f22..0c792e5f0b 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-calendar-axis.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-calendar-axis.js
@@ -1,6 +1,8 @@
+import ComponentId from '../../component-id'
+
 export default {
-  get (component, startTime, endTime, chart, orient) {
-    let calendar = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget, orient) {
+    let calendar = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     calendar.range = [startTime.toDate(), endTime.subtract(1, 'day').toDate()]
     if (orient) calendar.orient = orient
     calendar.dayLabel = {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-category-axis.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-category-axis.js
index 3066ca9f57..1755e02006 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-category-axis.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-category-axis.js
@@ -1,6 +1,7 @@
 import * as dayjs from 'dayjs'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
 import LocaleData from 'dayjs/plugin/localeData'
+import ComponentId from '../../component-id'
 dayjs.extend(LocalizedFormat)
 dayjs.extend(LocaleData)
 
@@ -16,9 +17,9 @@ const weekdays = {
 }
 
 export default {
-  get (component, startTime, endTime, chart, inverse) {
+  get (component, startTime, endTime, chart, chartWidget, inverse) {
     const config = component.config || {}
-    let axis = Object.assign({}, config)
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'category'
 
     axis.data = []
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-time-axis.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-time-axis.js
index 03aa1a5ac6..5616cecaf1 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-time-axis.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-time-axis.js
@@ -1,10 +1,11 @@
 import * as dayjs from 'dayjs'
 import IsoWeek from 'dayjs/plugin/isoWeek'
+import ComponentId from '../../component-id'
 dayjs.extend(IsoWeek)
 
 export default {
-  get (component, startTime, endTime, chart) {
-    let axis = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget) {
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'time'
     if (chart.config.chartType) {
       axis.min = (v) => {
@@ -18,7 +19,7 @@ export default {
       axis.max = endTime.toDate().getTime()
     }
 
-    if (!component.config.axisPointer) {
+    if (!axis.axisPointer) {
       axis.axisPointer = { show: true, label: { backgroundColor: '#2196f3' } }
     }
 
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-value-axis.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-value-axis.js
index cf4211cb82..485b8d0f68 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-value-axis.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/axis/oh-value-axis.js
@@ -1,6 +1,8 @@
+import ComponentId from '../../component-id'
+
 export default {
-  get (component, startTime, endTime, chart) {
-    let axis = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, chartWidget) {
+    let axis = chartWidget.evaluateExpression(ComponentId.get(component), component.config)
     axis.type = 'value'
     return axis
   }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js
index efc953003a..2a79caae21 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/chart-mixin.js
@@ -44,7 +44,7 @@ export default {
     let endTime = (chartType) ? this.addOrSubtractPeriod(dayjs().startOf(chartType), 1) : dayjs()
     return {
       items: {},
-      period,
+      speriod: period,
       endTime,
       orient: null
     }
@@ -53,6 +53,9 @@ export default {
     startTime () {
       return this.addOrSubtractPeriod(this.endTime, -1)
     },
+    period () {
+      return this.evaluateExpression('.period', this.speriod)
+    },
     options () {
       if (!this.config) return {}
       const chartConfig = this.config.options || {}
@@ -81,19 +84,19 @@ export default {
     },
     xAxis () {
       if (!this.context.component.slots || !this.context.component.slots.xAxis) return undefined
-      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component))
+      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this))
     },
     yAxis () {
       if (!this.context.component.slots || !this.context.component.slots.yAxis) return undefined
-      return this.context.component.slots.yAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, true)) // invert Y axis by default
+      return this.context.component.slots.yAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this, true)) // invert Y axis by default
     },
     calendar () {
       if (!this.context.component.slots || !this.context.component.slots.calendar) return undefined
-      return this.context.component.slots.calendar.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this.orient))
+      return this.context.component.slots.calendar.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this, this.orient))
     },
     singleAxis () {
       if (!this.context.component.slots || !this.context.component.slots.singleAxis) return undefined
-      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component))
+      return this.context.component.slots.xAxis.map((a) => axisComponents[a.component].get(a, this.startTime, this.endTime, this.context.component, this))
     },
     tooltip () {
       if (!this.context.component.slots || !this.context.component.slots.tooltip) return undefined
@@ -135,6 +138,7 @@ export default {
         return Promise.resolve(getter([]))
       }
 
+      let boundary = seriesComponents[component.component].includeBoundary?.(component)
       const itemPromises = neededItems.map((neededItem) => {
         if (this.items[neededItem]) return Promise.resolve(this.items[neededItem])
         return this.$oh.api.get(`/rest/items/${neededItem}`).then((item) => {
@@ -154,7 +158,8 @@ export default {
         let query = {
           serviceId: component.config.service || undefined,
           starttime: seriesStartTime.toISOString(),
-          endtime: seriesEndTime.subtract(1, 'millisecond').toISOString()
+          endtime: seriesEndTime.subtract(1, 'millisecond').toISOString(),
+          boundary: boundary
         }
 
         return Promise.all([itemPromises[neededItem], this.$oh.api.get(url, query)])
@@ -163,7 +168,7 @@ export default {
       return Promise.all(combinedPromises).then(getter)
     },
     setPeriod (period) {
-      this.period = period
+      this.speriod = period
       this.endTime = dayjs()
     },
     setDate (date) {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-datazoom.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-datazoom.js
index 52ebb6fbe6..3585ed7b52 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-datazoom.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-datazoom.js
@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-legend.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-legend.js
index 52ebb6fbe6..3585ed7b52 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-legend.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-legend.js
@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-title.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-title.js
index 52ebb6fbe6..3585ed7b52 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-title.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-title.js
@@ -1,5 +1,7 @@
+import ComponentId from '../../component-id'
+
 export default {
   get (component, startTime, endTime, chart, device) {
-    return component.config
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-toolbox.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-toolbox.js
index 40a1dbfb76..3f278ea2a7 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-toolbox.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-toolbox.js
@@ -1,3 +1,5 @@
+import ComponentId from '../../component-id'
+
 const presetFeatures = {
   saveAsImage: { title: 'Save as Image' },
   restore: { title: 'Restore' },
@@ -8,7 +10,7 @@ const presetFeatures = {
 
 export default {
   get (component, startTime, endTime, chart, device) {
-    const options = Object.assign({}, component.config)
+    const options = chart.evaluateExpression(ComponentId.get(component), component.config)
 
     if (options.presetFeatures && !options.feature) {
       options.feature = Object.assign({}, presetFeatures)
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-tooltip.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-tooltip.js
index cb29a62981..81943e8759 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-tooltip.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-tooltip.js
@@ -1,14 +1,15 @@
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
+import ComponentId from '../../component-id'
 dayjs.extend(LocalizedFormat)
 
 export default {
-  get (component, startTime, endTime, chart, device, items) {
-    let options = Object.assign({}, component.config)
+  get (component, startTime, endTime, chart, device) {
+    let options = chart.evaluateExpression(ComponentId.get(component), component.config)
     if (options.confine === undefined) options.confine = true
 
-    if (component.config.smartFormatter) {
+    if (options.smartFormatter) {
       options.formatter = (params, ticket, callback) => {
         let tooltip = ''
         if (params.componentType === 'markArea') {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-visualmap.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-visualmap.js
index 3c0dd933d1..9b80e7f241 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-visualmap.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/misc/oh-chart-visualmap.js
@@ -1,3 +1,5 @@
+import ComponentId from '../../component-id'
+
 const presetPalettes = {
   'greenred': ['#50a3ba', '#eac736', '#d94e5d'],
   'whiteblue': ['#ffffff', '#4c9ffb'],
@@ -6,11 +8,11 @@ const presetPalettes = {
 
 export default {
   get (component, startTime, endTime, chart, device) {
-    let options = Object.assign({}, component.config)
-    if (component.config.presetPalette && (!component.config.inRange || !component.config.inRange.color)) {
-      if (presetPalettes[component.config.presetPalette]) {
+    let options = chart.evaluateExpression(ComponentId.get(component), component.config)
+    if (options.presetPalette && (!options.inRange || !options.inRange.color)) {
+      if (presetPalettes[options.presetPalette]) {
         if (!options.inRange) options.inRange = {}
-        options.inRange.color = presetPalettes[component.config.presetPalette]
+        options.inRange.color = presetPalettes[options.presetPalette]
       }
     }
     if (options.min !== undefined) {
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/aggregators.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/aggregators.js
index 7be64cf942..8d66e75245 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/aggregators.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/aggregators.js
@@ -20,7 +20,11 @@ export default (aggregationFunction, arr, idx, values) => {
       aggregate = idx < 1 ? NaN : arr[1][0] - values[idx - 1][1][0]
       break
     case 'diff_last':
-      aggregate = idx < 1 ? NaN : arr[1][arr[1].length - 1] - values[idx - 1][1][values[idx - 1][1].length - 1]
+      if (idx < 1) {
+        aggregate = arr[1][arr[1].length - 1] - arr[1][0]
+      } else {
+        aggregate = arr[1][arr[1].length - 1] - values[idx - 1][1][values[idx - 1][1].length - 1]
+      }
       break
     case 'average':
       aggregate = arr[1].reduce((sum, state) => sum + parseFloat(state), 0) / arr[1].length
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-aggregate-series.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-aggregate-series.js
index f9da831626..734d2357a4 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-aggregate-series.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-aggregate-series.js
@@ -2,6 +2,7 @@ import * as dayjs from 'dayjs'
 import IsoWeek from 'dayjs/plugin/isoWeek'
 dayjs.extend(IsoWeek)
 import aggregate from './aggregators'
+import ComponentId from '../../component-id'
 
 function dimensionFromDate (d, dimension, invert) {
   switch (dimension) {
@@ -15,21 +16,45 @@ function dimensionFromDate (d, dimension, invert) {
   }
 }
 
+function includeBoundaryFor (component) {
+  return (!component || !component.config || component.config.aggregationFunction !== 'diff_last') ? undefined : true
+}
+
 export default {
-  neededItems (component) {
+  neededItems (component, chart) {
     if (!component || !component.config || !component.config.item) return []
-    return [component.config.item]
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    return [series.item]
+  },
+  includeBoundary (component) {
+    return includeBoundaryFor(component)
   },
   get (component, points, startTime, endTime, chart) {
-    let dimension1 = component.config.dimension1
-    let dimension2 = component.config.dimension2
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    let dimension1 = series.dimension1
+    let dimension2 = series.dimension2
+    let boundary = includeBoundaryFor(component)
+
+    const itemPoints = points.find(p => p.name === series.item).data
+
+    // we'll suppose dimension2 always more granular than dimension1
+    // e.g. if dimension1=day, dimension2 can be hour but not month
+    let groupStart = dimension2 || dimension1
+    if (groupStart === 'weekday' || groupStart === 'isoWeekday') groupStart = 'day'
+
+    if (boundary && itemPoints.length) {
+      let stime = dayjs(itemPoints[0].time)
+      let start = stime.startOf(groupStart)
+      if (!stime.isSame(start)) {
+        itemPoints.unshift({ time: start.valueOf(), state: NaN })
+      }
+      let etime = dayjs(itemPoints[itemPoints.length - 1].time)
+      if (etime.isSame(etime.endOf(groupStart))) {
+        itemPoints.splice(-1, 1)
+      }
+    }
 
-    const itemPoints = points.find(p => p.name === component.config.item).data
     const groups = itemPoints.reduce((acc, p) => {
-      // we'll suppose dimension2 always more granular than dimension1
-      // e.g. if dimension1=day, dimension2 can be hour but not month
-      let groupStart = dimension2 || dimension1
-      if (groupStart === 'weekday' || groupStart === 'isoWeekday') groupStart = 'day'
       let start = dayjs(p.time).startOf(groupStart)
       if (acc.length && acc[acc.length - 1][0].isSame(start)) {
         acc[acc.length - 1][1].push(p.state)
@@ -43,15 +68,15 @@ export default {
 
     const formatter = new Intl.NumberFormat('en', { useGrouping: false, maximumFractionDigits: 3 })
     const data = groups.map((arr, idx, groups) => {
-      const aggregationFunction = component.config.aggregationFunction || 'average'
+      const aggregationFunction = series.aggregationFunction || 'average'
       let value = aggregate(aggregationFunction, arr, idx, groups)
       if (value.toFixed) value = value.toFixed(3)
       if (dimension2) {
-        const axisX = (component.config.transpose) ? dimension2 : dimension1
-        const axisY = (component.config.transpose) ? dimension1 : dimension2
+        const axisX = (series.transpose) ? dimension2 : dimension1
+        const axisY = (series.transpose) ? dimension1 : dimension2
         return [dimensionFromDate(arr[0], axisX), dimensionFromDate(arr[0], axisY, true), formatter.format(value)]
       } else {
-        if (component.config.transpose) {
+        if (series.transpose) {
           return [formatter.format(value), dimensionFromDate(arr[0], dimension1, true)]
         } else {
           return [dimensionFromDate(arr[0], dimension1), formatter.format(value)]
@@ -59,11 +84,10 @@ export default {
       }
     })
 
-    let series = Object.assign({}, component.config)
     if (!series.type) series.type = 'heatmap'
 
     if (series.type === 'scatter') {
-      const symbolSizeFactor = component.config.scatterSymbolSizeFactor || 1
+      const symbolSizeFactor = series.scatterSymbolSizeFactor || 1
       series.symbolSize = (v) => {
         return v.pop() * symbolSizeFactor
       }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-calendar-series.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-calendar-series.js
index fe899c647b..47ddbeef8a 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-calendar-series.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-calendar-series.js
@@ -1,5 +1,6 @@
 import * as dayjs from 'dayjs'
 import aggregate from './aggregators'
+import ComponentId from '../../component-id'
 
 export default {
   neededItems (component) {
@@ -7,7 +8,8 @@ export default {
     return [component.config.item]
   },
   get (component, points, startTime, endTime, chart) {
-    const itemPoints = points.find(p => p.name === component.config.item).data
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
+    const itemPoints = points.find(p => p.name === series.item).data
     const groups = itemPoints.reduce((acc, p) => {
       let day = dayjs(p.time).startOf('day')
       if (acc.length && acc[acc.length - 1][0].isSame(day)) {
@@ -22,17 +24,16 @@ export default {
 
     const formatter = new Intl.NumberFormat('en', { useGrouping: false, maximumFractionDigits: 3 })
     const data = groups.map((arr, idx, days) => {
-      const aggregationFunction = component.config.aggregationFunction || 'average'
+      const aggregationFunction = series.aggregationFunction || 'average'
       let value = aggregate(aggregationFunction, arr, idx, days)
       return [arr[0].toDate(), parseFloat(formatter.format(value))]
     })
 
-    let series = Object.assign({}, component.config)
     if (!series.type) series.type = 'heatmap'
     series.coordinateSystem = 'calendar'
 
     if (series.type === 'scatter') {
-      const symbolSizeFactor = component.config.scatterSymbolSizeFactor || 1
+      const symbolSizeFactor = series.scatterSymbolSizeFactor || 1
       series.symbolSize = (v) => {
         return v.pop() * symbolSizeFactor
       }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-data-series.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-data-series.js
index bed908f581..de59557dc4 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-data-series.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-data-series.js
@@ -6,8 +6,6 @@ export default {
   },
   get (component, points, startTime, endTime, chart) {
     if (!component.config || typeof component.config !== 'object') return {}
-
-    const dataSeriesId = ComponentId.get(component)
-    return chart.evaluateExpression(dataSeriesId, component.config)
+    return chart.evaluateExpression(ComponentId.get(component), component.config)
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-mark-area.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-mark-area.js
index 444f612d4a..51197b2b6b 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-mark-area.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-mark-area.js
@@ -1,20 +1,24 @@
 import dayjs from 'dayjs'
 import LocalizedFormat from 'dayjs/plugin/localizedFormat'
+import ComponentId from '../../component-id'
 dayjs.extend(LocalizedFormat)
 
 export default {
   get (component, points, startTime, endTime, chart) {
-    const itemPoints = points.find(p => p.name === component.config.item).data
-    let markArea = Object.assign({}, component.config)
+    let markArea = chart.evaluateExpression(ComponentId.get(component), component.config)
+    const states = (markArea.states && !Array.isArray(markArea.states) ? [markArea.states] : markArea.states) || ['ON', 'OPEN']
+    const itemPoints = points.find(p => p.name === markArea.item).data
     markArea.data = []
     let rollingState = null
     let currentArea = null
     itemPoints.forEach((p) => {
-      if ((p.state === 'ON' && rollingState !== 'ON') || (p.state === 'OPEN' && rollingState !== 'OPEN')) {
-        currentArea = [{ name: component.config.name, xAxis: new Date(p.time) }]
-      } else if (((p.state !== 'ON' && rollingState === 'ON') || (p.state !== 'OPEN' && rollingState === 'OPEN')) && currentArea) {
+      // eslint-disable-next-line eqeqeq
+      if (states.findIndex((s) => s == p.state) >= 0 && states.findIndex((s) => s == rollingState) < 0) {
+        currentArea = [{ name: markArea.name, xAxis: new Date(p.time) }]
+      // eslint-disable-next-line eqeqeq
+      } else if ((states.findIndex((s) => s == p.state) < 0 && states.findIndex((s) => s == rollingState) >= 0) && currentArea) {
         currentArea.push({ xAxis: new Date(p.time) })
-        currentArea[0].name = component.config.name || component.config.item
+        currentArea[0].name = markArea.name || markArea.item
         currentArea[0].value = rollingState
         markArea.data.push(currentArea)
         currentArea = null
@@ -23,12 +27,12 @@ export default {
     })
     if (currentArea) {
       currentArea.push({ xAxis: endTime.toDate() })
-      currentArea[0].name = component.config.name || component.config.item
+      currentArea[0].name = markArea.name || markArea.item
       markArea.data.push(currentArea)
       currentArea = null
     }
 
-    if (!component.config.label) markArea.label = { show: false }
+    if (!markArea.label) markArea.label = { show: false }
 
     return markArea
   }
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-time-series.js b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-time-series.js
index 0b767e89d9..8a5d42052f 100644
--- a/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-time-series.js
+++ b/bundles/org.openhab.ui/web/src/components/widgets/chart/series/oh-time-series.js
@@ -4,13 +4,15 @@ import Framework7 from 'framework7'
 
 export default {
   neededItems (component, chart) {
-    const seriesItem = (!component || !component.config || !component.config.item) ? undefined : component.config.item
     let markAreaItems = []
     if (component.slots && component.slots.markArea) {
-      markAreaItems = component.slots.markArea.map(a => a.config.item)
+      markAreaItems = component.slots.markArea.map((a, i) =>
+        chart.evaluateExpression(ComponentId.get(component) + '.mitem' + i, a.config.item)
+      )
     }
+    let series = chart.evaluateExpression(ComponentId.get(component), component.config)
     return [
-      chart.evaluateExpression(ComponentId.get(component) + '.item', seriesItem),
+      series.item,
       ...markAreaItems
     ]
   },
@@ -35,8 +37,8 @@ export default {
       series.markArea = MarkArea.get(component.slots.markArea[0], points, startTime, endTime, chart)
     }
 
-    if (!component.config.showSymbol) series.showSymbol = false
-    if (!component.config.tooltip) {
+    if (!series.showSymbol) series.showSymbol = false
+    if (!series.tooltip) {
       series.tooltip = { show: true }
     }