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="mixed-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("mixed-chart"), {
    type: 'bar',
    data: {
      labels: ["Questions", "Answers", "Comment", "Users"],
      datasets: [{
          label: "Activity statistics",
          type: "line",
          borderColor: "#8e5ea2",
          data: [qaVal1,qaVal2,qaVal3,qaVal4],
          fill: false
        }, {
          label: "Activity statistics",
          type: "bar",
          backgroundColor: "rgba(0,0,0,0.2)",
          data: [qaVal1,qaVal2,qaVal3,qaVal4],
        }
      ]
    },
    options: {
      title: {
        display: true,
        text: 'Population growth (millions): Europe & Africa'
      },
      legend: { display: false }
    }
});