Billboard.js: Data label to show category

[flipcode1973]

I was looking for a way to show the x axis 'category' on a barchart data label (in addition to the value itself). Is this possible?

[netil]

Hi @flipcode1973, you mean data value + x Axis category text together?
For example, 150 + 1 in the below image?

[flipcode1973]

Hi @netil, thanks for the prompt reply. Yes, I have the x-axis ticks switched off as per picture below and wanted to show the category alongside the label

Assuming using code somewhere here but unsure as to whether I can access the category data here...

labels: {
            show: true,
            format: function (v, id, i, j) {
                var formatPercent = d3.format(",.2%");
                return formatPercent(v);
            }
        },

[netil]

The data.labels.format is called in a global context, which you can't get access chart instance on it.
How about having separated category data and access it as indexed value?

var data [ 
    ["x", "a", "b", "c"],
    ["data1", ... ]
];

var bb.generate({
    data: {
        data: data,
        x: "x",
        labels: {
            format: function (v, id, i, j) {
                return d3.format(",.2%")(v) + data[0][i + 1];
            }
        }
    }
});

[flipcode1973]

Thats great thankyou!

[sinisarudan]

This helped me. But I provide a 'correction' to the solution by @netil. some syntax missing and actually making it simpler by my opinion and correcting the result of the format function

**JS:**
generateTestChart1():void{
    var data = [ 
      ["data1", 0.1, 0.3, 0.2, 0.4, 0.5]
    ];

    var chart = bb.generate({
        bindto: "#test_chart",
        data: {
          type: "bar",
          columns: data,
          labels: {
              format: function (v, id, i, j) {
                  return d3.format(",.2%")(v);
              }
          }
        }
    });
  }

**HTML:**
<div id="test_chart">
      test chart
    </div>

It generates the Result which I also needed: