Black Lives Matter. Please consider donating to Black Girls Code today.

Open url in new tab when chart is clicked on

Is there a way to open a url in a new tab when a point on a chart is clicked on?


on the plotly page there is an explanation for ‘binding to click events’:
You could use this to process a custom action if the user click on a point. (Currently it is the NEAREST point - but this can changed in code.
I created a JSFiddle for you:

document.getElementById('myDiv').on('plotly_click', function(data){
    var pts = '';
    for(var i=0; i < data.points.length; i++){//find nearest point
        pts = 'x = '+data.points[i].x +'\ny = '+
            data.points[i].y.toPrecision(4) + '\n\n';
    }""+pts,'_blank');//open a url in a new tab
1 Like

Thanks very much for the reply. I will try this and let you know how it works.

Thanks! I was able to get this working.

1 Like

hello, thanks for posting this! I am trying to get this to work for a choropleth plot. I think it is possible because I found an example where an action occurs using plotly_click for a choropleth plot here (using Shiny) . I also found this example where a popup box is displayed on click event:

Using this sample code below for a choropleth plot, is it possible to get this code to work if a user clicks on each state?

    Plotly.d3.csv('', function(err, rows){
      function unpack(rows, key) {
          return { return row[key]; });

      var data = [{
          type: 'choropleth',
          locationmode: 'USA-states',
          locations: unpack(rows, 'code'),
          z: unpack(rows, 'total exports'),
          text: unpack(rows, 'state'),
          zmin: 0,
          zmax: 17000,
          colorscale: [
              [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
              [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
              [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
          colorbar: {
              title: 'Millions USD',
              thickness: 0.2
          marker: {
                  color: 'rgb(255,255,255)',
                  width: 2

      var layout = {
          title: '2011 US Agriculture Exports by State',
              scope: 'usa',
              showlakes: true,
              lakecolor: 'rgb(255,255,255)'

      Plotly.plot(myDiv, data, layout, {showLink: false});