CODEWITHSUNDEEP
jsonchartsvisualizationvega
irwazr
irwazr

Reputation: 77

How do you add a clickable hyperlink to a mark?

Does anyone have a working example of how to make a mark (i.e. symbol/shape) into a clickable object that launches a url in a new browser tab? The feature appears to exist on vega-lite, but not vega?

I've seen on issue #315 from 2015 that a pull request was merged into master for the ability to add a clickable hyperlink/href for marks in Vega visualisations. However I can't find any reference to this in the Vega documentation, nor any examples online that work.

Was this feature not implemented after-all or did maybe the documentation not get updated?

Issue #315: https://github.com/vega/vega/issues/315

If it turns out the documentation is not up to date, I'll take the action from this question into an issue on the repo to have the documentation updated.

Upvotes: 3

Views: 1188

Answers (1)

davidebacci
davidebacci

Reputation: 30174

Add a href to the mark's update encoding.

Editor link.

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A basic bar chart example, with value labels shown upon mouse hover.",
  "width": 400,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "table",
      "values": [
        {"category": "A", "amount": 28, "link": "http://www.google.com"},
        {"category": "B", "amount": 55, "link": "http://www.google.com"},
        {"category": "C", "amount": 43, "link": "http://www.google.com"},
        {"category": "D", "amount": 91, "link": "http://www.google.com"},
        {"category": "E", "amount": 81, "link": "http://www.google.com"},
        {"category": "F", "amount": 53, "link": "http://www.google.com"},
        {"category": "G", "amount": 19, "link": "http://www.google.com"},
        {"category": "H", "amount": 87, "link": "http://www.google.com"}
      ]
    }
  ],
  "scales": [
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "table", "field": "category"},
      "range": "width",
      "padding": 0.05,
      "round": true
    },
    {
      "name": "yscale",
      "domain": {"data": "table", "field": "amount"},
      "nice": true,
      "range": "height"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "xscale"},
    {"orient": "left", "scale": "yscale"}
  ],
  "marks": [
    {
      "type": "rect",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "amount"},
          "y2": {"scale": "yscale", "value": 0}
        },
        "update": {
          "fill": {"value": "steelblue"},
          "href": {"signal": "datum.link"}
        },
        "hover": {"fill": {"value": "red"}}
      }
    },
    {
      "type": "text",
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "fill": {"value": "#333"}
        },
        "update": {"fillOpacity": [{"value": 1}]}
      }
    }
  ]
}

Upvotes: 3

Related Questions