Search code examples
vega-lite

How to manage two different variables bound to the legend?


I have a line chart grouped using different fields (which I call dimentions) and I toggle between them using a dropdown menu. Example here

When I click on the legend I set the opacity to 0 for everything that is not selected, showing only the selected options. In the param I assigned "toggle": "true" in order to just click on extra values and add them to the variable.

When I click on any legend item and then switch to the other dimention the chart goes blank, the reason for this is that the variable that is holding the legend values is not cleared when changing dimentions and I can't find a way to achieve this behavior.

I tried splitting the view in layers to create different legends and params, I thought that setting "toggle": "dimention == 'dimentionX'" in order to add them or not the certain variable would work but it doesn't.


Solution

  • I've managed to solve it with help from another forum, here's the solution:

    1. Compile Vega-Lite to Vega
    2. To any signal that listens to view-click event add an additional dimention event to the listener, and in that case return null

    Solved example

    Kudos to Marco Liberati