JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="pie-chart" width="800" height="450"></canvas>

<div class="qa-widget-side qa-widget-side-top">
    <div class="qa-activity-count">
        <p class="qa-activity-count-item">
            <span class="qa-activity-count-data">3</span> questions
        </p>
        <p class="qa-activity-count-item">
            <span class="qa-activity-count-data">2</span> answers
        </p>
        <p class="qa-activity-count-item">
            <span class="qa-activity-count-data">1</span> comment
        </p>
        <p class="qa-activity-count-item">
            <span class="qa-activity-count-data">2</span> users
        </p>
    </div>
</div>

JavaScript

var qacd = document.querySelectorAll(".qa-activity-count .qa-activity-count-data");
var qaVal1 = qacd[0].textContent;
var qaVal2 = qacd[1].textContent;
var qaVal3 = qacd[2].textContent;
var qaVal4 = qacd[3].textContent;

new Chart(document.getElementById("pie-chart"), {
    type: 'pie',
    data: {
      labels: ["questions", "answers", "comment", "users"],
      datasets: [{
        label: "Population (millions)",
        backgroundColor: ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850"],
        data: [qaVal1,qaVal2,qaVal3,qaVal4]
      }]
    },
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: true
         }
    }
});