Display total count in doughnut chart

0
Hello, Is there any way to show total count at centre of the doughnut chart? Refer below image for doughnut chart. I am using mendix version 9.24.16
asked
1 answers
1

Hi Siddheswari,

You can create a container below the Donut chart (AnyChart), and then using CSS you can move it inside the piechart.

image.png

// Parent container that contains both Chart and the Total count container
.go-center 
{
   flex-wrap: unset;
    position: absolute;
    top: 20%;
    left: 27%;
    border-radius: 50%;
    background: white;
    width: 58%;
    height: 58%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
//Container that contains the Total count
.totalEvents
{
    position: absolute;
    text-align: center;
    width: 85%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    box-shadow: 0 0 5px #e3e3e3;
    border-radius: 50%;
}
//Another Div Inside the  .totalevent container
.pie-circle{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: #FFF;
    width: 65%;
    height: 65%;
    border-radius: 50%;
}
//Text that shows the count
.totalText
{
    font: normal normal bold 21px VisbyDM;
    letter-spacing: 0.9px;
    color: #3A3F57;
    opacity: 1;
   
}

A CSS something like this, should help.

Hope it helps!

answered