Anychart doughnut chart standalone label

Question

I'm trying to use a standalone label in the middle of the chart to display the "win %". Right now it is hard coded, but would like it to obviously based on the chart data..

label.text("80%");

Here my code

 <html>
    <head>
        <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script>
        <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-pie.min.js"></script>
    </head>

    <body>
        <script>

            anychart.onDocumentReady(function () {
            
            // create pie chart with passed data
            var chart = anychart.pie([
                ['Winner', 12],
                ['Looser', 3]
            ]);
            
            // set chart title text settings
            chart
                .title('% WIN RATIO')
                // set chart radius
                .radius('50%')
                // create empty area in pie chart
                .innerRadius('60%');
                // enable labels for a series

            // Centered label ---------------------------------------------------
            // create and configure a label
            var label = anychart.standalones.label();
            label.text("80%");
            label.width("100%");
            label.height("100%");
            label.fontColor("grey");
            label.hAlign("center");
            label.vAlign("middle");
            label.fontSize("22");

            // disable legend
            var legend = chart.legend();
            legend.enabled(false);

            // set the label as the center content
            chart.center().content(label);
            // ------------------------------------------------------------------

            // Information on hover ---------------------------------------------
            // configure tooltips on the chart
            chart.tooltip().title("Volume");
            chart.tooltip().format("{%value} Trades");
            // ------------------------------------------------------------------

            // Labels -----------------------------------------------------------
            // set chart labels position to outside
            //chart.labels().position('outside');
            chart.labels(false);
            // font labels font settings
            //chart.labels().fontFamily("Menlo");
            //chart.labels().fontSize(18);
            //chart.labels().fontDecoration("underline");
            //chart.labels().fontWeight(900);
            // ------------------------------------------------------------------

            // set container id for the chart
            chart.container('container');

            // initiate chart drawing
            chart.draw();
            });


        </script>


        <div id="container">
            
        </div>

    </body>
</html>

score 0 · Answer 1 · answered Feb 15 '23 at 08:13

Showing dynamic winrate percent is possible by accessing actual data. It is good practice to make a data set first in case you want to access and manipulate data later.

//Create dataset
    var dataSet = anychart.data.set([
                ['Winner', 50],
                ['Looser', 3]
            ])
    dataSet.mapAs({x: 0, value: 1})
    var chart = anychart.pie(dataSet);

When you have your data set, you can easily access certain points by using the getPoint() method.

//Get numbers of winners and losers
    var winnerCount = chart.getPoint(0).get("value")
    var loserCount = chart.getPoint(1).get("value")

//Calculate winrate
    var winRate = ((winnerCount*100)/(loserCount+winnerCount))

//Trim number and make it a String
    var winRateString = winRate.toFixed(1).toString() + "%"

Using this approach, you can easily visualize dynamic variables in your charts.

Feel free to explore how to extract data from points in a data set on our playground.

Anychart doughnut chart standalone label

1 Answers1