CODEWITHSUNDEEP
javascriptd3.js
aniket mule
aniket mule

Reputation: 91

Format labels in D3.js graph

I have created a bar chart in d3.js. However I am not able to format the Y-axis lables as per requirement. What I want to do is to add space between label texts. I have used tickFormat() but it is not able to achieve the same. Here is the part of code.

var yAxis = d3.axisLeft(y)
.tickSize(3)
.tickFormat(function(d, i) {
    return d +"    "+TOP_TEN_CHANNELS[i].views+""; //to create custom tick format
});

I need a space equal to four spaces between channel name and views but, I am getting single space. Check my plunker.

Upvotes: 1

Views: 99

Answers (1)

Gerardo Furtado
Gerardo Furtado

Reputation: 102218

You have to set the white-space property. In your case:

.barY .tick text {
  white-space: pre;
}

Here is the updated plunker: https://plnkr.co/edit/Stp7XoESdmjcsRxWbAFV?p=preview

Upvotes: 1

Related Questions