title: Horizontal chart label using Vue-chart.js
body: <p>I have developed a horizontal Bar chart using Vue-chart.js, all the data and labels are coming from API. The problem is that the value is also visible along with the label, How can I hide the value appearing beside the label? The image is given below </p>
  
  <p><a href="https://i.stack.imgur.com/3dgxy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3dgxy.png" alt="enter image description here"></a></p>
  
  <p>I have the following code. </p>
  
  <pre><code>import { HorizontalBar } from 'vue-chartjs'
  
  export default {
      name: 'diagram',
      extends: HorizontalBar,
      data: () =&gt; ({
          chartData: '',
          score: {},
          value: [],
          keys: [],
          options: {
              scales: {
                  xAxes: [{
                      ticks: {
                          scaleShowLabels:false,
                      }
                  }],
                  yAxes: [{
                      ticks: {
                          scaleShowLabels:false,
                          mirror: true
                      }
                  }]
              },
              responsive: true,
          },
  
          responsive: true,
          maintainAspectRatio: false
  
      }),
      created () {
  
          // Overwriting base render method with actual data.
          this.$http({
              method: 'get',
              url: this.base_url + '/exam/api/score/' + this.$store.state.user.id + '/',
  
              auth: {
                  username: 'my-username',
                  password: 'my-password'
              },
          }).then(res =&gt; {
  
              console.log(res);
              if (res.status == '200') {
                  console.log(res.data);
                  this.score = res.data;
                  for (let v  in  this.score) {
                      this.value.push(this.score[v]);
                  }
                  for (let key  in  this.score) {
                      this.keys.push(key);
                  }
              }
          });
          this.fillData()
  
      },
      mounted(){
          this.renderChart(this.chartData, this.options);
  
      },
  
      methods: {
  
          fillData ()  {
              this.chartData = {
  
                  labels: this.keys,
  
                  datasets: [
                      {
                          fillColor: "#ffecbf",
                          strokeColor: "#dacdd2",
                          data: this.value,
  
                      }
  
                  ],
  
              }
          }
      },
      watch: {
          data: function () {
              this._chart.destroy();
              this.renderChart(this.chartData, this.options);
          },
      },
  }
  </code></pre>
  
  <p>please help me out. Thanks in advance.</p>