title: Chartjs hide data point labels
body: <p>I created graph using chartjs. It works fine, only issue is it shows data labels (numbers) on each point. I want to hide them, but cannot find how. Can anyone help me solve this issue ? I tried setting pointRadius = 0, but it did not do what I want.</p>
  
  <p>Also if I can not hide them is there a way I can change their color ?</p>
  
  <p><a href="https://i.stack.imgur.com/fTIIs.png" rel="noreferrer">Chart Image</a></p>
  
  <pre><code>const ctx = document.getElementById('timelineChart');
  
          const chartColors = {
              red: '#C82846',
              green: '#7DC36E',
              blue: '#249FBA',
              darkblue: '#249FBA'
          };
  
          const config = {
              plugins: [new BandsPlugin()],
              type: 'bar',
              data: {
                  labels: ["January", "February", "March", "April", "May", "June", "April", "May", "June", "July",
                           "January", "February", "March", "April", "May", "June", "July"],
                  datasets: [
                      {
                          borderColor: chartColors.green,
                          fill: false,
                          type: 'line',
                          id: 'y-axis-1',
                          pointRadius: 0,
                          data: [
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor()
                          ],
                      }, {
                          type: 'bar',
                          id: 'y-axis-0',
                          borderWidth: 1,
                          borderColor: chartColors.green,
                          backgroundColor: chartColors.blue,
                          data: [
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor(),
                              this.randomPositiveFactor()
                          ],
                          fill: false,
                      }]
              },
              options: {
                  pointRadius: 1,
                  pointHoverRadius: 1,
                  legend: {
                      display: false
                  },
                  elements: {
                      line: {
                          tension: 0,
                      },
                      point: { radius: 0 }
                  },
                  responsive: true,
                  title: {
                      display: false,
                      text: 'Timeline Chart'
                  },
                  tooltips: {
                      mode: 'label',
                  },
                  hover: {
                      mode: 'dataset'
                  },
                  scales: {
                      xAxes: [{
                          barThickness: 15,
                          display: true,
                          scaleLabel: {
                              show: false,
                              labelString: 'Month'
                          },
                          ticks: {
                              beginAtZero: true
                          },
                          afterTickToLabelConversion: function (data) {
  
  
                              const xLabels = data.ticks;
  
                              xLabels.forEach(function (labels, i) {
                                  if (i % 2 === 1) {
                                      xLabels[i] = '';
                                  }
                              });
                          }
                      }],
                      yAxes: [{
                          id: 'y-axis-0',
                          display: true,
                          position: 'left',
                          scaleLabel: {
                              show: false,
                              labelString: 'Value'
                          },
                          ticks: {
                              suggestedMin: -100,
                              suggestedMax: 100,
                              max: 100,
                              min: 0,
                              stepSize: 100,
                          },
                      },
                      {
                          id: 'y-axis-1',
                          position: 'right',
                          ticks: {
                              suggestedMin: -100,
                              suggestedMax: 100,
                              max: 100,
                              min: -100,
                              stepSize: 100,
                          },
                          scaleLabel: {
                              show: false,
                              labelString: 'Value'
                          },
                      }]
                  },
                  bands: {
                      yValue: 50,
                      bandLine: {
                          stroke: 0.5,
                          colour: 'black',
                          type: 'dashed',
                      },
                      belowThresholdColour: [
                          chartColors.red,
                          chartColors.blue
                      ]
                  }
              }
          };
  
          const timelineChart = new Chart(ctx, config);
  </code></pre>