Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cursor param not support in axes

See original GitHub issue

In this graph, the mouse cursor changes to “wait” on hover over bars, but remains an arrow for different axes elements. Ideally, it should be possible to set the custom cursor over the whole axes area (otherwise the blank area between labels will not be configurable), but even setting it over the axes elements should work.

{
  "$schema": "https://vega.github.io/schema/vega/v3.0.json",
  "width": 400,
  "height": 200,
  "padding": 5,

  "data": [
    {
      "name": "table",
      "values": [
        {"u": 1,  "v": 28}, {"u": 2,  "v": 55},
        {"u": 3,  "v": 43}, {"u": 4,  "v": 91}
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "range": "width",
      "domain": {"data": "table", "field": "u"}
    },
    {
      "name": "yscale",
      "type": "linear",
      "range": "height",
      "domain": {"data": "table", "field": "v"},
      "zero": true,
      "nice": true
    }
  ],

  "axes": [
    {
      "orient": "bottom", "scale": "xscale",
      "encode": {
        "labels": {"enter": {"cursor": {"value": "ew-resize"}}},
        "ticks": {"enter": {"cursor": {"value": "wait"}}},
        "domain": {"enter": {"cursor": {"value": "wait"}}}
      }   
    },
    {"orient": "left", "scale": "yscale"}
  ],

  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "cursor": {"value": "wait"},
          "x": {"scale": "xscale", "field": "u", "offset": 1},
          "width": {"scale": "xscale", "band": 1, "offset": -1},
          "y": {"scale": "yscale", "field": "v"},
          "y2": {"scale": "yscale", "value": 0},
          "fill": {"value": "steelblue"}
        }
      }
    }
  ]
}

Issue Analytics

State:
Created 6 years ago
Comments:6 (6 by maintainers)

Top GitHub Comments

1reaction

jheercommented, Jun 20, 2017

@arvind: The problem was that Vega was expecting the name/interactive properties for the top-level group to be defined as top-level axis properties. I think this is confusing and inconsistent so I’ve removed the top-level properties and ensured that all custom encode groups behave the same way. This has now been released with the latest versions of both vega and vega-parser.

0reactions

arvindcommented, Jun 20, 2017

@jheer: It doesn’t seem like the axis property is actually having an effect. E.g.,

{
      "orient": "bottom", "scale": "xscale",
      "encode": {
        "axis": {
          "interactive": true,
          "update": {
            "fill": {"value": "red"},
            "cursor": {"value": "ew-resize"}
          }
        }
      }   
    }