how can i show labels and value in both on bar chart

Question

hello everyone i am creation a dashboard that contains bar chart using Angular 7 ,chart.js and chartjs-plugin-datalabels as you can see in the picture 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
what i mean is as you can see in my code (.ts) file

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
                }
              ]

            }
          })

and html file

<div class="container-fluid">
  <canvas id="defaut" height="40px"  width="100%">

  </canvas>
</div>

i have 3 data-sets i want to show on top of each bar its label i like REPERTOP01 but this code shows me poste1on top of the bar and also if i show the label the value disappear so how can i show REPERTOP01 instead of poste1 poste2and poste3 and show the value with it inside the bar

score 0 · Answer 1 · answered Apr 24 '19 at 15:11

For the text label issue, you'll need to change your custom formatter to return the dataset label instead:

formatter: function(value, context) {
  return context.chart.data.datasets[context.dataIndex].label;
}

The datalabels plugin does not support multiple labels per bar to the best of my knowledge. You'll need to manually draw one of the labels yourself following something like this SO answer: How to show data values or index labels in ChartJs (Latest Version).

how can i show labels and value in both on bar chart

1 Answers1