Search code examples
pythonvegavega-litealtair

Remove border around vegaEmbed geoshape generated by altair?

In the below image, observe the border around a map generated from Chart.save() to either HTML or JSON canvas (the border is inside the canvas, not CSS styled).

enter image description here

For any other type of mark, one would expect to be able to use Chart.configure_view() to set strokeWidth=0 to remove the border, but this does not appear to affect this geoshape chart.

The vegaEmbed embed options do not appear to document what creates this border.

Is it possible to style or remove the border?

Solution

  • The way to remove the border is using configure_view(strokeWidth=0).

    Here is an example, using the most recent version of Altair and the most recent version of Vega-Lite:

    import altair as alt
from vega_datasets import data

counties = alt.topo_feature(data.us_10m.url, 'counties')
source = data.unemployment.url

alt.Chart(counties).mark_geoshape().encode(
    color='rate:Q'
).transform_lookup(
    lookup='id',
    from_=alt.LookupData(source, 'id', ['rate'])
).project(
    type='albersUsa'
).configure_view(
    strokeWidth=0
)

    enter image description here

    If you see different results, it might be that your frontend renderer is out of date, and you should make certain you're using the most recent version of Vega-Lite to render your chart.