CODEWITHSUNDEEP
d3.jsdc.js
Shahabaz
Shahabaz

Reputation: 665

Label auto resizing for the bar charts dc.js

I have a bar chart with in dc.js. The x axis is dimension and y is the measure ranging from 1 - 10k. I want to show all the bars and their labels not overlapping each other. Chart looks fine when there are few bars when the number of bars starts to increase they look not okay. I am looking to auto resize the labels for the bar-chart.

Sample Chart enter image description here

I tried this method of renderlet to change the fontsize automatically

 stackedBarChart.on('renderlet', function(chart) {
             chart.selectAll('text.barLabel')
                 .attr('transform', function(d) {
                   //How do i get/set the width of the label here ?
                 });

Upvotes: 1

Views: 476

Answers (1)

Shahabaz
Shahabaz

Reputation: 665

I tried the below and I am able to do dynamic label sizing. I used pretransistion and inside that fetched all bar lables and altered their font-size. The font sizing is altered according to Gordon's Idea, Getting each bar's size and and assigning the font size dynamically. For testing I have used .2 as a factor to reduce the font size.

   .on('pretransition', function(chart) {
         var chart_width = chart.width();
        chart.selectAll("text.barLabel").attr('font-size', function(data) {
            let total_bars = chart.group().all().length;
            let sing_bar_width = Math.floor(chart_width / total_bars);
            return (sing_bar_width * .2) + "px";
        });
    });

Upvotes: 1

Related Questions