Back

Dashed slices and labels

Pie chart with dashed outlines for slices and labels. In the 'lineDash' array, you can define your own dashing pattern. For example, lineDash: [6, 6, 3, 3], will translate to 6 units of line, 6 units of blank space, 3 units of line, 3 units of blank space, and repeat.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

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

    <div id="demo" style="width: 100%">
    </div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 

    var chart = new PieChart({
        container: document.getElementById("demo"),
        area: { height: null },
        theme: PieChart.themes.gradient,
        data: { url: "/dvsl/data/pie-chart/browsers.json" },
        slice: {
            margin: 3,
            style: {
                lineDash: [3, 5],
                lineColor: "blue",
                label: {
                    backgroundStyle: {
                        lineColor: "black",
                        lineDash: [6, 6, 3, 3]
                    },
                    textStyle: {
                        font: "30px arial"
                    },
                    padding: 5,
                    borderRadius: 15
                }
            }
        }
    });

Data

Data 
//Data too large to output
Download Data