How to fix label of pie chart in d3.js

Question

I have a pie chart that is working fine. But the problem is when the slice of the pie is so small the numbers inside it is can't be seen just like this:

Instead of seening 3.21% on the green slice. It only shows the 21.

How can I resolve this? I'm still really new to D3.js and I'm using d3 version 5.

Here is my code fiddle:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DASHBOARD</title>

    <!--Lib css-->
    <!--bootstrap-->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <!--<link rel="stylesheet" href="bootstrapDateTimePicker/daterangepicker.min.css"> -->


    <!--jquery-->
    <script src="https://code.jquery.com/jquery-3.5.0.js"
        integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>

    <!--own css-->
    <!--lib js-->

    <!--bootstrap-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>

    <!--fontawesome js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>

    <!--d3(chart) js-->
    <script src="https://d3js.org/d3.v5.min.js"></script>

</head>

<body>
    <div class="wrapper">
        <!-- Sidebar -->

        <!--Page content-->
        <div id="content">
            <!-- navbar -->
            <div class="container">
                <div class="col-md-6">
                    <div class="card shadow mb-3">
                        <h5 class="card-header">
                            Downtime vs Uptime
                        </h5>
                        <div class="card-body">
                            <div id="pieChart2"></div>
                        </div>
                    </div>
                </div>
            </div>

            <script>

                var data = [{"columns_percent":"Down Time","percentage_result":3.21},{"columns_percent":"Up Time","percentage_result":96.79}];


                var svgCirWidth = 600, svgCirHeight = 300, radius = Math.min(svgCirWidth, svgCirHeight) / 2;

                const pieContainer = d3.select("#pieChart2")
                    .append("svg")
                    .attr("width", svgCirWidth)
                    .attr("height", svgCirHeight);

                //create group element to hold pie chart

                var g = pieContainer.append("g")
                    .attr("transform", "translate(" + 350 + "," + radius + ")");

                var color = d3.scaleOrdinal(d3.schemeSet3);

                var pie = d3.pie().value(function (d) {
                    return d.percentage_result;
                });

                var path = d3.arc()
                    .outerRadius(radius)
                    .innerRadius(0);

                var arc = g.selectAll("arc")
                    .data(pie(data))
                    .enter() //means keeps looping in the data
                    .append("g");

                arc.append("path")
                    .attr("d", path)
                    .attr("fill", function (d) {
                        return color(d.data.percentage_result);
                    })
                    .append("text")
                    .text("afdaf");

                var label = d3.arc()
                    .outerRadius(radius)
                    .innerRadius(0);

                arc.append("text")
                    .attr("transform", (d) => {
                        return "translate(" + label.centroid(d) + ")";
                    })
                    .attr("text-anchor", "middle")
                    .text((d) => {
                        return d.data.percentage_result + "%";
                    });

                var legendG = g.selectAll(".legend")
                    .data(pie(data))
                    .enter()
                    .append("g")
                    .attr("transform", function (d, i) {
                        return "translate(" + (-300) + "," + (i * 15 + 20) + ")";
                    })
                    .attr("class", "legend");

                legendG.append("rect")
                    .attr("width", 10)
                    .attr("height", 10)
                    .attr("fill", function (d) {
                        return color(d.value);
                    });

                legendG.append("text")
                    .text(function (d) {
                        return d.data.columns_percent + " - " + d.data.percentage_result + "%";
                    })
                    .style("font-size", 12)
                    .attr("y", 10)
                    .attr("x", 11);
            </script>


</body>

</html>

score 2 · Accepted Answer · answered May 23 '20 at 23:49

Easiest solution is to switch the order of the SVG paths drawn so that the smallest slice of the pie is drawn last and thus on top of the other elements.

var data = [
{
    "columns_percent": "Up Time",
    "percentage_result": 96.79
},{
    "columns_percent": "Down Time",
    "percentage_result": 3.21
},
]

Sorting an array of objects by property values

How to fix label of pie chart in d3.js

1 Answers1