href opening new browser window/tab

[williamducfer]

Hello,

In the code below, is it possible to change the href behaviour to opening the URL in a new browser window/tab?

import altair as alt
from vega_datasets import data
from urllib.parse import urlencode

def make_google_query(name):
    return "https://www.google.com/search?" + urlencode({'q': '"{0}"'.format(name)})

cars = data.cars()
cars['url'] = cars['Name'].apply(make_google_query)

alt.Chart(cars).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    href='url',
    tooltip=['Name', 'url']
)

[jakevdp]

No, there's no way to do this, unfortumately. See vega/vega-lite#3795

[kennydataml]

Hi there was mention in the comments of vega/vega-lite#3795 3 days ago about being able to override the loader with the following issue:
vega/vega-embed#77

How can we get support for this?

[jakevdp]

The only way to do that with Altair would be to define your own renderer with javascript that calls the appropriate vega view method. I'm not aware of any example, and I don't personally know how to do it. Let us know if you figure it out.

[kennydataml]

some reference links:

• Specify target in href links vega#1171
• https://altair-viz.github.io/user_guide/configuration.html#defining-a-custom-theme
• https://github.com/vega/vega-embed#options

I noticed enabling dark theme and rendering the html produces:
"usermeta": {"embedOptions": {"theme": "dark"}}

I created custom theme like this:

def dark_href():
    return {
        "usermeta": {
            "embedOptions": {
                'theme': 'dark',
                'loader': {'target': '_blank'}
            }
        }
    }


# register the custom theme under a chosen name
alt.themes.register('dark_href', dark_href)

# enable the newly registered theme
alt.themes.enable('dark_href')

the theme was dark, but href still did not open new tab. I've added comments to vega/vega-lite#3795 already.

My use case is actually to render chart into a custom html page, and I've used #1422 as a reference.
Looking at the vega-embed readme, there is an opt argument. I modified vegaEmbed like this:
vegaEmbed('#vis1', spec1, {'loader': {'target': '_blank'}}).catch(console.error);
href opening to new tab works as expected.

For this to work somewhere else other than html, like a jupyter notebook, the usermeta.embedOptions is the only way to do it but it's not working as expected. hopefully a resolution shows up in vega/vega-lite#3795

[kennydataml]

PR vega/vega-embed#626 has resolved the issue. vega-embed v6.15.1 has the fix for usermeta.embedOptions.

works as expected when rendering the chart in html page. had to hard code the script version to:
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.15.1"></script>

I think altair.VEGAEMBED_VERSION would need to be updated accordingly for this to work outside of html.

[napierajpl]

Can you provide a working example of chart with href and url opening in new tab, please?

[joelostblom]

Answered on SO: https://stackoverflow.com/questions/72238350/how-to-open-url-from-altair-chart-in-a-new-tab-href/, you can set the usermeta on the chart dictionary:

chart['usermeta'] = {
    "embedOptions": {
        'loader': {'target': '_blank'}
    }
}

[quantoid]

chart['usermeta'] = {
    "embedOptions": {
        'loader': {'target': '_blank'}
    }
}

This doesn't work for me.