Single Stacked bar with three sections in Angular

After a struggle of one day finally I have developed it using Chart.js

ngOnInit() {
this.chart = new Chart("Chart1", {
type: 'bar',
data: {
    labels: [''],
    datasets: [{
        pointHoverBackgroundColor: 'red',
        label: 'Unenrolled',
        data: [27],
        backgroundColor:"#FF1C00"


    },
    {
        label: 'Enrolled',
        data: [40],
        backgroundColor:"#ED872D"
    },
    {
        label: 'Registerded',                
        data: [12],
        strokeColor: "#F29220",
        backgroundColor:"#318CE7"
    }

],

},
options: {

    tooltips: {
        mode: 'dataset'
    },
    responsive: true,
    legend: {
        display: true,
        position: 'bottom',
        labels: {
            fontSize: 10,
            usePointStyle: true
        }
      },
    scales: {
      yAxes: [{
        type: 'linear',
        display: true,
        position:"left",
        barRoundness: 0.3,
        barPercentage: 0.4,
        stacked: true,             
        ticks: {
            stepSize: 20,
            suggestedMax: 80,
            beginAtZero: true
        }
      }],
      xAxes: [{
        position:"right",
        stacked: true,
        display: true,
        scaleLabel: {
            display: true,
            labelString: ''},
        barPercentage: 0.3,
        barRoundness: 0.3,
        ticks: {
          beginAtZero: true
        }
      }]

    }
}
});

};

showData(evt:any)
{
  var data = this.chart.getElementsAtEvent(evt)
  console.log(data[0]._model); // it prints the value of the property
}

This is html and css file

<div id="mydiv">
  <canvas id="Chart1" height="30px"  (click)="showData($event)"></canvas>
</div>

#mydiv
{
display: block;
width: 300px;
height: 400px;
}

Output Screenshot: