Interactive vega chart is not working in Kibana

Elastic Stack Kibana
1

I created a Vega interactive chart in Kibana and it's not working as expected. The chart is getting rendered but it's not clickable.
Kibana version : 6.5
I tried the same code in vega editor and it's working fine there.
Here is my code

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.0.json",
  "title": "counts",
 "data": {
    "values": [
      {"a": "A", "b": 28}, {"a": "B", "b": 55}, {"a": "C", "b": 43},
      {"a": "D", "b": 91}, {"a": "E", "b": 81}, {"a": "F", "b": 53},
      {"a": "G", "b": 19}, {"a": "H", "b": 87}, {"a": "I", "b": 52}
    ]
  },
  "selection": {
    "highlight": {"type": "single", "empty": "none", "on": "mouseover"},
    "select": {"type": "multi"}
  },
  "mark": {
    "type": "bar",
    "fill": "#4C78A8",
    "stroke": "black",
    "cursor": "pointer"
  },
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"},
    "fillOpacity": {
      "condition": {"selection": "select", "value": 1},
      "value": 0.3
    },
    "strokeWidth": {
      "condition": [
        {
          "test": {
            "and": [
              {"selection": "select"},
              "length(data(\"select_store\"))"
            ]
          },
          "value": 2
        },
        {"selection": "highlight", "value": 1}
      ],
      "value": 0
    }
  },
  "config": {
    "scale": {
      "bandPaddingInner": 0.2
    }
  }
}

Please let me know if i am missing anything.

Thanks,
SK Nair

2

It is usually very difficult to debug Vega questions without having your data. To make it easier, please follow these steps to include data with your graph when posting:

  • Reduce your data query to the smallest possible dataset, e.g. set the time range to 15 minutes. It will work as long as it is not empty and represents your data well enough.
  • Open Browser Debugger (for Chrome, right click and click Inspect )
  • Switch to the Console tab
  • Copy the right command, paste it in the console at the > symbol and hit enter (check the schema in your graph to see if you use Vega or Vega-Lite)
JSON.stringify(VEGA_DEBUG.vega_spec)  // <-- if you use Vega
JSON.stringify(VEGA_DEBUG.vegalite_spec)  // <-- if you use Vega-Lite
  • Copy the entire result string into your post, or if it is too big, attach it as a file.

Useful debugging tips

You can use VEGA_DEBUG for more than just exporting raw code with data. See debugging docs. Examlpes:

  • VEGA_DEBUG.view.data('mydatasource') -- shows data of a specific data source after all transformations. In Vega, use the data source names. Vega Lite automatically creates them for you - to see which ones were created, see the VEGA_DEBUG.vega_spec data section.
  • VEGA_DEBUG.view.signal('mysignal') -- shows the current value of a signal.
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.