Линейная диаграмма, как это

Question

Я хотел бы создать такой график для html, но я не знаю, как это сделать, не могли бы вы мне помочь?

Я пытался, но не могу, сделайте это

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<div class='lineCategoria'>
  <canvas id="line-chart" width="800" height="450"></canvas>
  <script>
    new Chart(document.getElementById("line-chart"), {
      type: 'line',
      data: {
        labels: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
        datasets: [{
          data: [34],
          label: "faith",
          borderColor: "#3e95cd",
          fill: false
        }, {
          data: [52],
          label: "work",
          borderColor: "#8e5ea2",
          fill: true
        }]
      },
      options: {
        title: {
          display: true,
          text: 'Dominios'
        }
      }
    });
  </script>
</div>

Мне нужно, чтобы он отображался в таблице с процентами в 100%, с метками в строке и количеством очков, полученных в конце