Search code examples
javascriptplotlygeo

Is it possible to have a horizontal color bar in plotly.js


I am working with choropleth charts in plotly.js. Is there a way to get the colorbar scale to display horizontally at the bottom of the chart instead of vertically along the right or left sides?

For reference, check out the first example given at the Plotly site https://plot.ly/javascript/choropleth-maps/#world-choropleth-map-robinson-projection

Thank you!

Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/2010_alcohol_consumption_by_country.csv', function(err, rows){
      function unpack(rows, key) {
          return rows.map(function(row) { return row[key]; });
      }

    var data = [{
        type: 'choropleth',
        locationmode: 'country names',
        locations: unpack(rows, 'location'),
        z: unpack(rows, 'alcohol'), 
        text: unpack(rows, 'location'),
         autocolorscale: true
    }];

    var layout = {
      title: 'Pure alcohol consumption among adults (age 15+) in 2010',
      geo: {
          projection: {
              type: 'robinson'
          }
      }
    };
    Plotly.plot(myDiv, data, layout, {showLink: false});
});

Solution

  • Unfortunately No. There is already a bug logged about it on Github on Apr 15, 2016

    https://github.com/plotly/plotly.js/issues/1244

    I don't see any progress on it.