zing-chart ring text align to center

Question

I'm not able to align the text to center.

HTML code

<zingchart id="ring"  zc-json="data" ></zingchart>

zingchart json data

$scope.data = {
    globals: {
        shadow: false,
        fontFamily: "Verdana",
        fontWeight: "100"
    },
    type: "ring",
    backgroundColor: "#fff",

    legend: {
        layout: "x5",
        position: "50%",
        borderColor: "transparent",
        marker: {
            borderRadius: 10,
            borderColor: "transparent"
        }
    },
    tooltip: {
        text: "%v $"
    },
    plot: {
        refAngle: "-90",
        borderWidth: "0px",
        valueBox: {
            placement: "in",
            text: "%npv %",
            "font-color":"black",
            fontSize: "15px",
            textAlpha: 1,
        }
    },
    series: [{
        text: "Total Billed",
        values: $scope.billedHours,
        backgroundColor: "#97c563",
    }, {
        text: "Total Budget",
        values: $scope.projectRevenue,
        backgroundColor: "#f7d347",
    }]
};

I'm using this Libary for the very first time, tried different options but nothing happend. need help from experts, please suggest something. thanks in advance.

Answer 1

I tried this in my project and this should do the trick, just replace your legend property with this.

If I am right you can also use layout: "center"

            legend: {
                layout: "2x2", //this should center it on mid
                position: "50%",
                borderColor: "transparent",
                marker: {
                    borderRadius: 10,
                    borderColor: "transparent"
                }
            },