'How to hide the three-dot dropdown menu on a Vega chart?
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?
Solution 1:[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
Solution 2:[2]
If you use React you can add actions={false} to remove it
<VegaLite spec={spec} actions={false} />
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | jakevdp |
| Solution 2 | Yana Trifonova |