Border width or line width of switch chart

Setup, Configuration and Use Items & Sitemaps
1

Hello,

Is there a way to increase the line thickness or the border width in the following example of a chart of a switch or contact? Short spikes are very poorly visible.

Thanks

image
image1307×70 1.04 KB

config:
chartType: “”
period: D
label: Haustuere_Schloss + 1
slots:
grid:
- component: oh-chart-grid
config:
includeLabels: true
xAxis:
- component: oh-time-axis
config:
gridIndex: 0
yAxis:
- component: oh-value-axis
config:
gridIndex: 0
series:
- component: oh-time-series
config:
name: Haustuere_Schloss
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: blue
areaStyle: {}
slots:
markArea:
- component: oh-mark-area
config:
name: Haustuere_Schloss
item: Haustuere_Schloss
- component: oh-time-series
config:
name: Haustuere_Sensor
gridIndex: 0
xAxisIndex: 0
yAxisIndex: 0
type: line
color: red
areaStyle: {}
slots:
markArea:
- component: oh-mark-area
config:
name: Haustuere_Sensor_Contact
item: Haustuere_Sensor_Contact
tooltip:
- component: oh-chart-tooltip
config:
confine: true
smartFormatter: true
legend:
- component: oh-chart-legend
config:
bottom: 3
type: scroll
dataZoom:
- component: oh-chart-datazoom
config:
type: inside

2

Quick hint: Your post’s code will always be easier for others to read if you use code fences:

```
Code here
```

The charts use apache eCharts so you can always check that documentation to try and find options. It’s very comprehensive and well laid out (though sometimes slightly opaque):

In this case, you need the lineStyle object to set the width so it should, I think, look something like this:

- component: oh-time-series
  config:
    name: Haustuere_Schloss
    gridIndex: 0
    xAxisIndex: 0
    yAxisIndex: 0
    type: line
    color: blue
    lineStyle:     <-----------
      width: 2     <-----------
    areaStyle: {}
  slots:
    markArea:
      - component: oh-mark-area
        config:
          name: Haustuere_Schloss
          item: Haustuere_Schloss
3

Thanks for the answer and the tip with the fences!

Unfortunately, lineStyle and width do not make any change. Is it possible that only the area is marked and the border (line) is not displayed at all? The Echarts docu did not help me.

config:
  chartType: ""
  period: D
  label: Haustuere_Schloss + 1
slots:
  grid:
    - component: oh-chart-grid
      config:
        includeLabels: true
  xAxis:
    - component: oh-time-axis
      config:
        gridIndex: 0
  yAxis:
    - component: oh-value-axis
      config:
        gridIndex: 0
  series:
    - component: oh-time-series
      config:
        name: Haustuere_Schloss
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        color: blue
        lineStyle:
          width: 10
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: Haustuere_Schloss
              item: Haustuere_Schloss
    - component: oh-time-series
      config:
        name: Haustuere_Sensor
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        color: red
        lineStyle:
          width: 10
        areaStyle: {}
      slots:
        markArea:
          - component: oh-mark-area
            config:
              name: Haustuere_Sensor_Contact
              item: Haustuere_Sensor_Contact
    - component: oh-time-series
      config:
        name: Series 3
        gridIndex: 0
        xAxisIndex: 0
        yAxisIndex: 0
        type: line
        item: Haustuere_Sensor_Contact_Numeric
  tooltip:
    - component: oh-chart-tooltip
      config:
        confine: true
        smartFormatter: true
  legend:
    - component: oh-chart-legend
      config:
        bottom: 3
        type: scroll
  dataZoom:
    - component: oh-chart-datazoom
      config:
        type: inside
4

Yep, you’re absolutely right. I completely missed that. Because the boolean type item automatically use a markarea, the data is not being drawn as a line. In the eCharts docs you’ll see there’s also a section of markArea and in this case you modify that using the itemStyle object. So, if you want to draw a border around your marked areas it would look like this:

- component: oh-time-series
  config:
    name: Haustuere_Schloss
    gridIndex: 0
    xAxisIndex: 0
    yAxisIndex: 0
    type: line
    color: blue
    areaStyle: {}
  slots:
    markArea:
      - component: oh-mark-area
        config:
          name: Haustuere_Schloss
          item: Haustuere_Schloss
          itemStyle:                      <--------
            borderWidth: 2                <--------

All the other markArea itemStyle options listed are also available.

1 Like
5

Works perfectly, thank you!