0

I'm using C3 donut chart,

enter image description here

But the label is too long and I need a word-break like feature.

So I tried to set the following properties, non of them works

axis: {
  x: {
    tick: {
      width: 100
    }
  }
},
legend: {
  maxWidth: 100px;
},

Any ideas?

UPDATE

The tooltip.format.name function can partially solve this problem. But I'm unable to add newline here, tried "\n", <br/> and &#13;

    tooltip: {
      format: {
        name: function (name, ratio, id, index) { 
          if (name.length > 70) {
            return name.substr(0, 70) + ' &#013; ...'
          } else {
            return name
          }
        }
      }
    }
daisy
  • 22,498
  • 29
  • 129
  • 265
  • Possible duplicate of [line break for d3 circle title tooltipText](https://stackoverflow.com/questions/41646689/line-break-for-d3-circle-title-tooltiptext) – Constantin Chirila Nov 15 '18 at 11:18
  • You could use the C3 [donut: { width: nnn }](https://c3js.org/reference.html#donut-width) option to make the donut ring wider to accommodate your text. – Vanquished Wombat Nov 15 '18 at 11:52

0 Answers0