Making vertical legend in datamaps

Question

I'm using DataMaps to make a choropleth, but am having problems modifying the legend. I would like to make the legend vertical and to the right of the map. The documentation is unclear on how to do this. How can I create a stacked/vertical legend?

I used the following code to create the legend:

var legend_params = {
  legendTitle: "Some Test Data",
};
map.legend(legend_params);

And here's the css that attempts to modify it:

.datamaps {
  position: relative;
  display: inline-block;
  text-align: center;
}

.datamaps-legend {
    color: white;
    right: -100px;
    top: 0;
    position: relative;
    display: inline-block;
    text-align: center;
 }

.datamaps-legend dl {
  text-align: center;
  display: inline-block;
  position: static;
}

Here's my jsfiddle example.

Answer 1

I don't think there is an option for a horizontal legend in datamaps. I used it for a project and ended up rewriting the legend function to make it meet requirements. I was able to get the legend stacked/vertical and to the right of the map with CSS. The colors and values aren't lined up. If the values are static, you can line them up by targeting specific dt/dd (:nth-child or :nth-of-type) elements and adding padding as needed. If the values are dynamic, you will need a more clever solution. I added css for .datamaps-legend dt and modified top in .datamaps-legend. Example in fiddle

.datamaps-legend dt{
  clear:both;
}
.datamaps-legend {
    color: white;
    right: -100px;
    top: 128px;
    position: relative;
    display: inline-block;
    text-align: center;
 }