C3: C3 pie chart label position

[gballampalli]

I need to know how to configure position of pie chart labels in customised way that is outside the pie chart

[netil]

Currently there's no option for that purposes.
You need positioning text label manually like this way.

onrendered: function() {
    d3.selectAll(".c3-chart-arc text").each(function(v) {
        var label = d3.select(this);
        var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);

        // pos[0] is x, pos[1] is y. Do some position changes and update value
        label.attr("transform", "translate("+ pos[0] +","+ pos[1] +")");
    });
});

And don't forget change label text color updating fill property value as your necessity.

.c3-chart-arc text {
    fill: red;
    font-size: 13px;
}

[gballampalli]

@Jae Thanks a lot... One more thing on hovering the tooltip is going inside
the div which should be in front of div...other types of charts except pie
in c3 handle properly the position of tooltip

On 3 Mar 2017 7:30 a.m., "Jae Sung Park" [e-mail] wrote:

Currently there's no option for that purposes.
You need positioning text label manually like this way.

onrendered: function() {
d3.selectAll(".c3-chart-arc text").each(function(v) {
var label = d3.select(this);
var pos = label.attr("transform").match(/-?\d+(.\d+)?/g);

  // pos[0] is x, pos[1] is y. Do some position changes and update value
  label.attr("transform", "translate("+ pos[0] +","+ pos[1] +")");

});
});

And don't forget change label text color updating fill property value as
your necessity.

.c3-chart-arc text {
fill: red;
font-size: 13px;
}

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/c3js/c3/issues/1982#issuecomment-283843058, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AY7PlFeX5Tkfy86SecdxU27mn_ZReMXaks5rh3RRgaJpZM4MQvMj
.

[netil]

@gballampalli, set tooltip.position callback to handle the position of tooltip.

• http://c3js.org/reference.html#tooltip-position

        tooltip: {
            position: function (data, width, height, element) {
                // in this case, tooltip will appear x,30 and y:20
                return {
                    top: 20, left: 30
                };
            }
        }

[sathiathirumal]

Can we make this a native option in C3?

[diegodominguezm]

Alguna solución para C3?

[DigitalWheelie]

Any feedback about making this native to C3?

[StanicaAndi89]

The top and bottom labels are cutoff , do you have any solutions for this?

[DigitalWheelie]

Mu suggestion is to switch to BillboardJS and set clipPath attribute to false:
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.clipPath

[StanicaAndi89]

Do you know if BillboardJs is working with Rotativa? I need to export these charts to a pdf, C3.js is the only library that I found to work (I ve tried chart.js / chartist.js/ and d3.js)

[StanicaAndi89]

I ve just tried and is not showing up in pdf :(

[DigitalWheelie]

Seems like you need C3js.
Maybe try to resize the chart, make it smaller to fit the space when values are outside the pie:
https://c3js.org/reference.html#size-width

[vishal-macha]

@StanicaAndi89 -- I do have a similar requirement as yours..I f you are using C3 JS or D3 JS Please Can you share me an example to display the labels outside the donut chart..

Thanks in Advance