benkeen / d3pie

A configurable pie chart lib and generator built on d3.js
MIT License
371 stars 203 forks source link

Outer label overlapping if we put value in outer label #103

Open akhil--k opened 8 years ago

akhil--k commented 8 years ago

Outer label overlapping if we put content as value in outer label, working fine with content label. Screenshot attached image

benkeen commented 8 years ago

Hmm, thanks! If you can reproduce this again, could you go to Generate and post the generated javascript in this ticket?

akhil--k commented 8 years ago
<script>
var pie = new d3pie("pieChart", {
    "header": {
        "title": {
            "text": "Lots of Programming Languages",
            "fontSize": 24,
            "font": "open sans"
        },
        "subtitle": {
            "text": "A full pie chart to show off label collision detection and resolution.",
            "color": "#999999",
            "fontSize": 12,
            "font": "open sans"
        },
        "titleSubtitlePadding": 9
    },
    "footer": {
        "color": "#999999",
        "fontSize": 10,
        "font": "open sans",
        "location": "bottom-left"
    },
    "size": {
        "canvasWidth": 590,
        "pieOuterRadius": "90%"
    },
    "data": {
        "sortOrder": "value-desc",
        "content": [
            {
                "label": "JavaScript",
                "value": 264131,
                "color": "#2484c1"
            },
            {
                "label": "Ruby",
                "value": 218812,
                "color": "#0c6197"
            },
            {
                "label": "Java",
                "value": 157618,
                "color": "#4daa4b"
            },
            {
                "label": "PHP",
                "value": 114384,
                "color": "#90c469"
            },
            {
                "label": "Python",
                "value": 95002,
                "color": "#daca61"
            },
            {
                "label": "C+",
                "value": 78327,
                "color": "#e4a14b"
            },
            {
                "label": "C",
                "value": 67706,
                "color": "#e98125"
            },
            {
                "label": "Objective-C",
                "value": 36344,
                "color": "#cb2121"
            },
            {
                "label": "Shell",
                "value": 28561,
                "color": "#830909"
            },
            {
                "label": "Cobol",
                "value": 24131,
                "color": "#923e99"
            },
            {
                "label": "C#",
                "value": 100,
                "color": "#ae83d5"
            },
            {
                "label": "Coldfusion",
                "value": 68,
                "color": "#bf273e"
            },
            {
                "label": "Fortran",
                "value": 218812,
                "color": "#ce2aeb"
            },
            {
                "label": "Coffeescript",
                "value": 157618,
                "color": "#bca44a"
            },
            {
                "label": "Node",
                "value": 114384,
                "color": "#618d1b"
            },
            {
                "label": "Basic",
                "value": 95002,
                "color": "#1ee67b"
            },
            {
                "label": "Cola",
                "value": 36344,
                "color": "#b0ec44"
            },
            {
                "label": "Perl",
                "value": 32170,
                "color": "#a4a0c9"
            },
            {
                "label": "Dart",
                "value": 28561,
                "color": "#322849"
            },
            {
                "label": "Go",
                "value": 264131,
                "color": "#86f71a"
            },
            {
                "label": "Groovy",
                "value": 218812,
                "color": "#d1c87f"
            },
            {
                "label": "Processing",
                "value": 157618,
                "color": "#7d9058"
            },
            {
                "label": "Smalltalk",
                "value": 114384,
                "color": "#44b9b0"
            },
            {
                "label": "Scala",
                "value": 95002,
                "color": "#7c37c0"
            },
            {
                "label": "Visual Basic",
                "value": 78327,
                "color": "#cc9fb1"
            },
            {
                "label": "Scheme",
                "value": 67706,
                "color": "#e65414"
            },
            {
                "label": "Rust",
                "value": 36344,
                "color": "#8b6834"
            },
            {
                "label": "FoxPro",
                "value": 32170,
                "color": "#248838"
            }
        ]
    },
    "labels": {
        "outer": {
            "format": "value",
            "pieDistance": 32
        },
        "inner": {
            "hideWhenLessThanPercentage": 3
        },
        "mainLabel": {
            "fontSize": 11
        },
        "percentage": {
            "color": "#ffffff",
            "decimalPlaces": 0
        },
        "value": {
            "color": "#adadad",
            "fontSize": 11
        },
        "lines": {
            "enabled": true
        },
        "truncation": {
            "enabled": true
        }
    },
    "effects": {
        "pullOutSegmentOnClick": {
            "effect": "linear",
            "speed": 400,
            "size": 8
        }
    },
    "misc": {
        "gradient": {
            "enabled": true,
            "percentage": 100
        }
    }
});
</script>