在文本标签内添加div

Question

I have a text tag <text></text> , which is getting from c3 donut chart title. i want to change the content of that text tag. So I tried like this way:

$handlerdiv.find(".c3-chart-arcs-title").append("<div style='background:green;'>"+skbl+"</div>");

but it is not working, because it is not possible to append to a text tag.

What I want is to display donut chart title inside the chart circle and this title content should be in two lines.

Chart is generated this way:

var chart = c3.generate({
    bindto : bindto,
    data : {
        columns : [],
        type : 'donut',
        colors : colors,
        order : order
    },
    donut : {
        title : title,
        label : {
            show : label
        },
        width : width,
    },
});

Answer 1

You can use d3.js to add elements to chart, for example a second line to title in a donut chart:

d3.select(".c3-chart-arcs-title")
  .append("tspan")
  .attr("dy", 16)
  .attr("x", 0)
  .text("Second title");

Here is a fiddle: https://jsfiddle.net/beaver71/20s6sw4L/