How to hide the three-dot dropdown menu on a Vega chart?

Question

I have a simple chart embedded in my website. Using the vega-lite spec v5. Here's an example:

The circle with three dots triggers a drop-down menu with some actions, including opening the chart in an online vega editor. I don't want to expose these actions to the end user.

How can I disable the menu?

Fauve

Answer 1

This is called the "actions" menu, and it can be controlled via the actions option in the vegaEmbed call used to display the chart.

You can hide the menu by setting actions: false; it would look something like this:

<div id="vis"></div>
<script type="text/javascript">
  var spec = "https://raw.githubusercontent.com/vega/vega-lite/master/examples/specs/bar.vl.json";
  vegaEmbed('#vis', spec, {"actions": false});
</script>

More information on available options can be found at https://github.com/vega/vega-embed#options

Clarance

Thanks, worked like a charm. Knowing the right terms to search for is key! – Fauve

Answer 2

If you use React you can add actions={false} to remove it

<VegaLite spec={spec} actions={false} />

Carencarena