4

I am trying to make the Legend text to wrap by setting up some width limits. No matter what I tried I cannot figure out how to lessen the width of the ".c3-legend-item-event" so it can get to two lines or more, otherwise the text is so long that goes outside of my html.

The legend is set to: legend: {position: 'inset'} and then I moved it toward the right of the graph but no way I can wrap or make it break to two lines or more.

I read examples with jQuery to append your own Legend that is easily modified, however, I would like to avoid it. I also have no control over the data feed and cannot shorten the Legend text.

Reference to the graph I am using to see the source code is here: http://c3js.org/samples/chart_bar.html

Reference to legend options and setup is here: http://c3js.org/reference.html

Here is the a part of my code:

var bar = c3.generate({
        legend: {
            position: 'inset',
            inset: {
                x: 300,
                y: 40,
            }
        },
        data: {
          columns: list,
          type: 'bar',
          onclick: function (d, element) { console.log("onclick", d, element); },
          onmouseover: function (d) { console.log("onmouseover", d); },
          onmouseout: function (d) { console.log("onmouseout", d); },
          order: "asc"
        },
        bar: {
          width: {
            ratio: 0.7,
            //max: 50
          },
        },
});

Any help is appreciated.

Thank you.enter image description here

  • Try adding padding to the container. Could you show some code? – Justin Breiland Jan 29 '15 at 14:28
  • I am using the c3js graph from: http://c3js.org/samples/chart_bar.html, no padding or margin works here... available options are in the legend section here: http://c3js.org/reference.html, however, none of those helped to solve the problem. –  Jan 29 '15 at 14:29
  • In the link you shared, there is a padding option. Check it out here http://c3js.org/samples/options_padding.html – Justin Breiland Jan 29 '15 at 14:42
  • Padding option from that link is for the chart/graph not for the legend that is below the chart... the code on that page is editable. I wish it did work... –  Jan 29 '15 at 14:44

0 Answers0