Control multi line spreading of x-axis tick in billboard.js

Question

Following one example we can format the tick text. I see that this is set to multiline: true by default, which is fine, but I also want to be able to control where the line breaking happens. Is there a way to do that?

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
           rotate: -75,
            format: function (x) {
              return x.getFullYear() + ' control this line breaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

score 2 · Accepted Answer · answered Feb 14 '18 at 02:40

2

There's no <br> for svg text nodes. To line break, it needs to add a <tspan> node for each line of text.

For this moment, you can handle line-breaking with the axis.x.tick.width option.

axis: {
    x: {
        tick: {
            width: 80
        }
    }
},

answered Feb 14 '18 at 02:40

Jae Sung Park

900
6
9

I went with this solution for now, although it seems more of a trial-and-error approach. – knee pain Feb 21 '18 at 08:09
@bgiuga, I agree on that. Handling text in svg is quite annoying. – Jae Sung Park Feb 21 '18 at 08:33

score 0 · Answer 2 · answered Aug 02 '18 at 08:38

UPDATE - billboard.js now supports multiline

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
  <script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
  <title>JS Bin</title>
</head>

<body>
  <div id="tick"></div>
  <script>
    var chart = bb.generate({
      data: {
        x: "x",
        columns: [
          ["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
          ["sample", 30, 200, 100, 400, 150, 250]
        ]
      },
      size: {
        width: 500,
        height: 250
      },
      legend: {
        show: false
      },
      axis: {
        x: {
          height: 100,
          type: "timeseries",
          tick: {
           //rotate: -20,
            format: function (x) {
              return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
            }
          }
        }
      },
      bindto: "#tick",
    });
  </script>
</body>

</html>

Control multi line spreading of x-axis tick in billboard.js

2 Answers2