Long column names overlap in legend with equally=true

[kmatarese]

Description

When setting legend.equally=true the legend item titles can overlap. I noticed in testing this that if all of the column names are exactly the same length it behaves better. Using equally would be really helpful for me because I can have cases with many many legend items, but the overlap issue makes it a no-go.

Steps to check or reproduce

You'll either need to add a lot of columns or shrink down your screen width, but this example reproduced it for me:

// base css
import "billboard.js/dist/theme/insight.css";
import bb from "billboard.js";

var chart = bb.generate({
  data: {
    columns: [
    	["very long column name 1", 30, 200, 100, 400, 150, 250],
  	["very long column name 2", 130, 100, 140, 200, 150, 50],
        ["long column name 3", 130, 100, 140, 200, 150, 50],
        ["long column name 4", 130, 100, 140, 200, 150, 50],
        ["long column name 5", 130, 100, 140, 200, 150, 50],
        ["long column name 6", 130, 100, 140, 200, 150, 50],
    ],
    type: "bar"
  },
  legend: {
    equally: true,
  },
  bar: {
    width: {
      ratio: 0.5
    }
  },
  bindto: "#barChart"
});

[netil]

Maybe this issue is somehow attached with the #1601.

[kmatarese]

To work around this I've started using a custom legend template, have a fixed width per legend item, and use CSS to set overflow: hidden on each item. This leads to longer items just getting truncated instead of running over each other. I then add overflow: visible on hover over the legend item so the full value is visible. I'm also no longer using equally=true though, and am relying on an external library (Vuetify) to manage the spacing via flex.