How to put text on top of a "datapoint" chart chart?

0

Hello,

I have the following graph:

Iwanttodothis:

Thecodeforthepage:

  var yLabels = {0: '', 4: 'Pessimo', 6: 'Trancamento', 8: 'Ruim', 14: 'Excelente', 12: 'Mobilidade Acadêmica', 10: 'Regular', 16: 'Sucesso', 2: 'Fracasso', 18: ''}

          var lineChartData = {
            labels: [, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, , , ,],
            datasets: [{
              data: [, , , , , , , , , , , , , , , , , , 6, , , , ],
              pointBackgroundColor: '#00bfff',
              borderColor: '#000',
              borderWidth: 1,
              fill: false,
              pointRadius: 15,
              pointHoverRadius: 15
            },{
              data: [, 10, 14, 10, 10, 10, 14, 10, 10, 10, 10, 14, 10, 8, 8, 8, 8, 6, 6, , , ,],
              pointBackgroundColor: '#ffce56',
              borderColor: '#000',
              fill: false,
              borderWidth: 1,
              pointRadius: 5,
              pointHoverRadius: 5
            },{
              data: [, , , , , , , , , , , , , , , , , , 6, , , 16, ],
              pointBackgroundColor: '#008000',
              borderColor: '#000',
              borderWidth: 1,
              fill: false,
              borderDash: [10,5],
              pointRadius: 5,
              pointHoverRadius: 5
            },{
              data: [, , , , , , , , , , , , , , , , , , 6, , , 2, ],
              pointBackgroundColor: '#8b0000',
              borderColor: '#000',
              borderWidth: 1,
              fill: false,
              borderDash: [10,5],
              pointRadius: 5,
              pointHoverRadius: 5
            }]
          }

          var lineChartOptions = {
            tooltips: {enabled: false},
            hover: {mode: null},
            elements: {line: {tension: 0}},
            legend: {display: false},
            scales: {
              xAxes: [{gridLines: {display: true}}], 
              yAxes: [{
                gridLines: {display: false}, 
                ticks: {
                  min: 0, 
                  max: 18, 
                  callback: function(value, index, values) {
                    return yLabels[value];
                  }
                }
              }]
            },
            title: {display: true, text: 'Classificação do estudante ao longo dos semestres'}
          }

          var ctx = document.getElementById("myChart").getContext("2d");

          var myChart = new Chart(ctx, {type: 'line', data: lineChartData, options: lineChartOptions});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<canvas id="myChart"></canvas>

      
    
asked by anonymous 29.11.2018 / 12:58

0 answers