Increasing font size in C3 charts without cutting off the text

Question

I have tried different CSS techniques to change the font size of text in C3 charts. But when I use CSS, the text gets cut off beyond certain font-size (ex. 14px). I am using horizontal bar-chart with y-axis labels and data displayed at the end of each bar ( Something like this - http://c3js.org/samples/axes_rotated.html ). Is there any way to customize the font-size through C3 API? If not, whats the best approach to handle such cases?

Answer 1

Please find code and fiddle :

   d3.selectAll('.c3-text')
        .each(function(d){
        var self = d3.select(this),
            width = +d3.select('.c3-zoom-rect').attr('width');
        if (+self.attr('x') + self.node().getComputedTextLength() > width){
            self.attr('text-anchor', 'end');
          self.attr('dx', '-5');
        }
    });

In case you ever struggle with line charts' axes font-size cutting issue, simply add:

c3.generate({
...
padding: {
  left: 500
},
...
});

To set a dynamic value, try using a little jQuery Plugin that gets the length of a text-string:

$.fn.textWidth = function(text, font) {
  if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
  $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
  return $.fn.textWidth.fakeEl.width();
};

var longest_text_width = 0;
chartData[0].forEach(function(data) {
  var w = $.fn.textWidth(data, '13px Clear Sans');
    if (w > longest_text_width) {
      longest_text_width = w;
    }
});

var chart = c3.generate({

  ...

  padding: {
    left: longest_text_width + 10 // add 10px for some spacing
  },

  ...

});