Search code examples
vega-lite

Is there a way to change the formatting (font, color, etc.) of the interactive elements for "bind"?


Using the bind property in vega-lite will show an interactive element (e.g., a slider, dropdown, radio, etc.). For example, in https://vega.github.io/vega-lite/docs/bind.html, there is a sample showing the name of the bound parameter, org_Origin, and the dropdown values in the default font. Is there any way to change this, e.g., set the color of the name "org_Origin" to white?

I played around with the config definition for selection, as well as potential other options that it could possibly inherit from (title, header, legend), but was unable to find anything that worked.


Solution

  • Are you able to apply a css style or this via deneb?

    enter image description here

    Via css you could add the following for example:

    (Online css: .example .vega-bind select)

    .vega-bind select {
        max-width: 180px;
        font-size: 16px !important;
        color: blue !important;
        background-color: aliceblue !important;
        border-color: silver;
        border-radius: 3px !important;
        padding: 4px !important;
    }