Search code examples
d3.jslegendscatter-plotnvd3.jsbubble-chart

How to disable legend in nvd3 or limit it's size


I'm using nvd3 and have a few charts where the legend is much to large. E.g. a scatter/bubble with 15 groups and the group names are long. The legend is so large that it leaves almost no room for the chart itself.

Is there a way to remove the legend or toggle the legend or limit the height/width it is taking up? Any example would be great.

Also, is there a way to have the bubble show a descriptive string? Right now when you stand on top of a bubble it highlights the x/y coordinates. I also want it to show the bubble name.

For example, each of my bubbles represents a country (which has a name), the x is GDP and the y is debt. The group is a classification/not name.


Solution

  • .showLegend(false) will help you. Here is an example -

    chart = nv.models.multiBarHorizontalChart().x(function(d) {
                    return d.x
                }).y(function(d) {
                    return d.y
                }).showLegend(false);