Back

Label style

Labels can be styled to match your project theme.

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