Error: Cannot read property 'indexOf' in Perspective designer

[richard-lee-863]

I have built a simple line chart that i want to use as an embedded "sparkline" component. I am getting lots of errors like this in the Ignition designer. It is unclear what i need to do to fix the error, or what it is affecting:

15:50:41.127 [Browser Thread: 64221] ERROR Perspective.Designer.Workspace - level: LEVEL_ERROR
message: "onerrorLogger: {\"stack\":\"TypeError: Cannot read property \'indexOf\' of null\\n    at t.value 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:111:61529)\\n    at t.value 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:111:351083)\\n    at t.value
(http://192.168.4.101:48088/res/kyvislabs/Components.js:111:347788)\\n    at t.value 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:111:373848)\\n    at t.value 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:120:38475)\\n    at t.create 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:111:3987)\\n    at http://192.168.4.101:48088/res/kyvislabs/Components.js:120:36859\\n    at new Promise (<anonymous>)\\n    at t.value 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:120:21627)\\n    at ApexChart.componentDidMount 
(http://192.168.4.101:48088/res/kyvislabs/Components.js:3087:20)\",\"message\":\"Cannot read property \'indexOf\' of null\",\"name\":\"TypeError\",\"logData\":{\"msg\":\"unhandledrejection\",\"errorMsg\":\"Cannot read property \'indexOf\' of null\"}}"
line_number: 2
source: "http://192.168.4.101:48088/res/perspective/js/PerspectiveClient.fd30fcd8486628b272de.js"

[nikolai-wolterstorff]

Can you provide a view json with the issue, and your Ignition version? The error is pretty ambiguous.

[richard-lee-863]

Ignition version 8.1.19. view:

{
  "custom": {},
  "params": {
    "trend_data": [
      {
        "x": 1661210886008,
        "y": 1875.52
      },
      {
        "x": 1661226618892,
        "y": 2382.909912109
      }
    ]
  },
  "propConfig": {
    "params.trend_data": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "height": 140,
      "width": 390
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "apexchart"
        },
        "position": {
          "basis": "100%",
          "grow": 1
        },
        "propConfig": {
          "props.options.colors[0]": {
            "binding": {
              "config": {
                "path": "session.custom.colors.green"
              },
              "type": "property"
            }
          },
          "props.series[0].data": {
            "binding": {
              "config": {
                "path": "view.params.trend_data"
              },
              "type": "property"
            }
          }
        },
        "props": {
          "options": {
            "chart": {
              "dropShadow": {
                "blur": 10,
                "color": "#000",
                "enabled": false,
                "left": 5,
                "opacity": 0.2,
                "top": 10
              },
              "events": {
                "animationEnd": false,
                "beforeMount": false,
                "beforeResetZoom": false,
                "beforeZoom": false,
                "brushScrolled": false,
                "click": false,
                "dataPointMouseEnter": false,
                "dataPointMouseLeave": false,
                "dataPointSelection": false,
                "legendClick": false,
                "markerClick": false,
                "mounted": false,
                "mouseLeave": false,
                "mouseMove": false,
                "scrolled": false,
                "selection": false,
                "updated": false,
                "zoomed": false
              },
              "height": "auto",
              "toolbar": {
                "show": false
              },
              "type": "line"
            },
            "colors": [
              null
            ],
            "dataLabels": {
              "enabled": false
            },
            "grid": {
              "borderColor": "transparent",
              "row": {
                "colors": [
                  "transparent",
                  "transparent"
                ],
                "opacity": 0.5
              }
            },
            "legend": {
              "floating": false,
              "horizontalAlign": "right",
              "offsetX": -5,
              "offsetY": -25,
              "position": "top"
            },
            "markers": {
              "size": 1
            },
            "stroke": {
              "curve": "smooth"
            },
            "title": {
              "align": "left",
              "text": ""
            },
            "tooltip": {
              "enabled": false
            },
            "xaxis": {
              "axisBorder": {
                "show": false
              },
              "labels": {
                "show": false
              },
              "title": {
                "text": ""
              },
              "type": "datetime"
            },
            "yaxis": {
              "axisTicks": {
                "show": true
              },
              "foceNiceScale": true,
              "labels": {
                "show": false
              },
              "max": "function(max) { return max }",
              "min": "function(min) { return min }",
              "tickAmount": 2,
              "title": {
                "text": ""
              }
            }
          },
          "series": [
            {
              "name": "value"
            }
          ],
          "style": {
            "margin": 0,
            "padding": 0
          }
        },
        "type": "kyvislabs.display.apexchart"
      }
    ],
    "meta": {
      "name": "root"
    },
    "props": {
      "direction": "column",
      "justify": "center",
      "style": {
        "margin": 0,
        "overflow": "hidden",
        "padding": 0
      }
    },
    "type": "ia.container.flex"
  }
}

[traviscox]

I think the issue is the binding you have on the options.colors[0] property is NULL. It is bound to session.custom.colors.green. Once I added that to the session property, everything worked just fine. You can also remove the binding if you don't need it.