title: how can i show labels and value in both on bar chart
body: <p>hello everyone i am creation a dashboard that contains bar chart using Angular 7 ,<a href="https://www.chartjs.org/" rel="nofollow noreferrer">chart.js</a>  and <a href="https://chartjs-plugin-datalabels.netlify.com/samples/index.html" rel="nofollow noreferrer">chartjs-plugin-datalabels</a>
  as you can see in the  <a href="https://i.stack.imgur.com/TKsqS.png" rel="nofollow noreferrer">picture</a>   the bar chart contains different data sets each one has it's own label i wanted to show the label on each one on top of the bar and its value but i did not know how my code only shows me the label of data-set<br>
  what i mean is as you can see in my code (.ts) file</p>
  
  <pre><code>this.chartdef= new Chart('defaut',
            {
              type:'bar',
  
              options:{
                cutoutPercentage:40,
                responsive :true,
  
                title:{
                  display:true,
                  text:'TRG VAGUE'
                },
                plugins:{
                  datalabels:{
                    align:'top',
                    display: 'true',
                    color:'#ffffff',
  
                  }
                }
  
  
              },
              data:{
                labels:['poste1','poste2','poste3'],
                datasets:[
                  {
                    label:'REPERTOP01',
                    data:[10,7.5,4.5],
                    backgroundColor:'rgba(255, 0, 0,1)',
                    borderColor:'rgba(255, 0, 0,0.6)',
                    borderWidth:1,
                    fill:false,
                    datalabels: {
                      align: 'end',
                      anchor: 'end',
  
  
                      formatter: function(value, context) {
                        return context.chart.data.labels[context.dataIndex];
                      }
  
                    }
  
                  },
                  {
                    label:'REPERTOP02',
                    data:[4.5,0,1],
                    backgroundColor:'rgba(255, 102, 0,1)',
                    borderColor:'rgba(255, 102, 0,0.6)',
                    fill:false,
                    borderWidth:1
                  },
                  {
                    label:'REPERTOP02',
                    data:[4.5,0,0],
                    backgroundColor:'rgba(255, 225, 0,1)',
                    borderColor:'rgba(255, 225, 0,0.6)',
                    fill:false,
                    borderWidth:1
                  }
                ]
  
              }
            })
  </code></pre>
  
  <p>and html file</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;canvas id="defaut" height="40px"  width="100%"&gt;
  
    &lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>i have 3 data-sets i want to show on top of each bar its label i like <code>REPERTOP01</code> but this code shows me <code>poste1</code>on top of the bar and also if i show the label the value disappear so how can i show <code>REPERTOP01</code> instead of <code>poste1</code> <code>poste2</code>and <code>poste3</code> and show the value with it inside the bar</p>