I am new to angular. I want implement vertical bar or stacked bar with three colors. Colors area depends on the values like Accept -10, reject-6, pending -20.
When I click on one section it should fire the event.
I have a requirement screenshot
I have gone through many articles but they are showing chart with multiple verticals bars not the single. This and this
How can I implement it?
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:
