Back

Label style

Pie chart labels can be configured in 'style'. Here, we configured label background color, outline, shadow, text font and color, and other settings.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>

        <div>
            <div id="demo">
            </div>
        </div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

        var doc = document.getElementById("demo");
        var chart = new PieChart({
            container: doc,
            area: { height: null },
            data: { url: "/dvsl/data/pie-chart/browsers.json" },
            info: {
                contentsFunction: function (data) {
                    return data.name;
                }
            },
            slice: {
                style: {
                    label: {
                        backgroundStyle: {
                            lineColor: "blue",
                            fillColor: "#77c277",
                            shadowBlur: 4,
                            shadowColor: "#000000"
                        },
                        padding: 10,
                        borderRadius: 4
                    },
                    insideLabel: {
                        textStyle: {
                            font: "13px Arial",
                            fillColor: "rgba(200,255,200,0.1)",
                            shadowColor: "#000000"
                        }
                    }
                }
            }
        });

Data

Data 
//Data too large to output
Download Data