Billboard.js optional Y grid lines - styling for label's background

Question

So If I'm duplicating this example from billboard.js documentation it seems easy to add optional Y grid lines. This is something I want, since I'm adding them dynamically in different scenario.

The thing that I cannot seem to figure out is how to add custom style to the text when talking about a background color. It seems like you cannot add style to a svg g element (in billboard you get a svg <g> element containing a <line> and a <text>).

So if I want to make it seem like the text element is in some kind of let's say green bubble, is there a way to achieve that?

var chart = bb.generate({
  data: {
    columns: [
 ["sample", 30, 200, 100, 400, 150, 250],
 ["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
    ],
    axes: {
      sample2: "y2"
    }
  },
  axis: {
    y2: {
      show: true
    }
  },
  grid: {
    y: {
      lines: [
        {
          value: 50,
          text: "Label with some bublly background"
        },
        {
          value: 1300,
          text: "Label 1300 for bubbly style",
          axis: "y2",
          position: "start"
        },
        {
          value: 350,
          text: "Label 350 for y",
          position: "middle"
        }
      ]
    }
  },
  bindto: "#OptionalYGridLines"
});

<!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="OptionalYGridLines"></div>  
    </body>
    </html>

Jae Sung Park · Accepted Answer · 2018-05-09T08:37:29.093

grid.y.lines option accepts 'class' value also.

So, if you need to customize some styling to text you can do something like:

grid: {
    y: {
      lines: [
        {
          value: 350,
          text: "Label 350 for y",
          position: "middle",
          class: "test-name"
        }
      ]
    }
}

// apply to specific grid line text
.test-name text { fill: red }

// to apply all grid text
.bb-grid text { fill:red }

BTW, there's no way set background-color for svg's text element.

Background color of text in SVG

var chart = bb.generate({
      data: {
        columns: [
     ["sample", 30, 200, 100, 400, 150, 250],
     ["sample2", 1300, 1200, 1100, 1400, 1500, 1250]
        ],
        axes: {
          sample2: "y2"
        }
      },
      axis: {
        y2: {
          show: true
        }
      },
      grid: {
        y: {
          lines: [
            {
              value: 50,
              text: "Label with some bublly background"
            },
            {
              value: 1300,
              text: "Label 1300 for bubbly style",
              axis: "y2",
              position: "start"
            },
            {
              value: 350,
              text: "Label 350 for y",
              position: "middle"
            }
          ]
        }
      },
      bindto: "#OptionalYGridLines"
});
    
    
function addBackground() {
 const index = document.querySelector("#index").value;
 const grid = chart.internal.main.select(`.bb-ygrid-line:nth-child(${index})`);
 const text = grid.select("text").node().getBBox();
 
 grid.insert("rect", "text")
  .attr("width", text.width)
  .attr("height", text.height)
  .attr("x", text.x)
  .attr("y", text.y)
  .style("fill", "#38ff00");
}

<!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="OptionalYGridLines"></div>  
          
          <input type="number" id="index" style="width:40px" value=3>
          <button onclick="addBackground()">Add background</button>
        </body>
        </html>

Am I able to somehow tell billboard to also add a `` or some other element so I can add the needed background-color? — knee pain, May 09 '18 at 07:33
@bgiuga, checkout the above snippet example. You can add `` element manually. — Jae Sung Park, May 09 '18 at 08:38
one question: the `chart.internal...`, is this something that I should feel free to use? — knee pain, May 11 '18 at 07:07
basically, `chart.internal` isn't documented and is private for now, but as being exposed it's used in some circumstances. Try use `d3.select(`.bb-ygrid-line:nth-child ...` instead. — Jae Sung Park, May 11 '18 at 11:33

Billboard.js optional Y grid lines - styling for label's background

1 Answers1