I'm working with pure canvas-html to make a piechart. The slice properties(radius,angles) changes according data. Each slice has an array of objects. I want that when i click on one slice a div with info from the array appears. Is that possible? I read about tooltip but i want to be able to click anywhere inside the slice and show the info in the possition where is clicked.
EDIT: I add how i create the pie and slices, im working canvas as dataClass. Im trying something like this example: https://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/
drawSlices() {
let startAngle = -Math.PI / 2;
for (const type in this.data) {
const changeToNumber = this.data[type].map(elem=>Number(elem.typeCount)),
typeTotal = changeToNumber.reduce((prev,post)=>prev+post,0),
// eachRadius = (this.width/3)*typeTotal/this.totalValue + this.width*(25/100),
eachRadius = (this.width/3 + this.height/3) * typeTotal / this.totalValue +30,
sliceAngle = (2 * Math.PI * typeTotal) / this.totalValue;
const randomColor = this.data[type][0].typeColor;
this.drawPieSlice(this.width/2,this.height/2,eachRadius,startAngle,startAngle + sliceAngle, randomColor);
startAngle += sliceAngle;
}
}
drawPieSlice (centerX,centerY,radius,startAngle,endAngle,color){
this.ctx.fillStyle = `${color}`;
this.ctx.strokeStyle = `#000`
this.ctx.beginPath();
this.ctx.moveTo(centerX,centerY);
this.ctx.arc(centerX, centerY, radius, startAngle, endAngle);
this.ctx.closePath();
this.ctx.fill();
this.ctx.stroke();
}