Ad

Javascript-How To Make Overlay Tag On The Pie Chart By Chartist Js

- 1 answer

I wana know how use chartist js to make this effect.
When the mouse enter, the tag shows up.
Picture form chart js
I encountered two issue:
1.I know how to add event listener.The data type 'slice' only contains center position.
data type 'label' contain the position what I want but I don't want label shows up so I set showLabel:false.
2.I tried to append html and set z-index,x position, y position but not worked.
How can I do?

=====================(update current result)============================
This project is for business so I mark out the title.
Picture form chart js
Currently I have no idea how to do. Here is My code:

new Chartist.Pie('#pieAppUsageChart', AppUsagePiedata, {
        height: 300,
        showLabel: false
    }).on('draw', function(data){
        if(data.type === 'slice'){
            console.log(data);
            $('#pieAppUsageChart').find("."+data.series.className).on('mouseenter',function(){
            }).on('mouseleave',function(){
            });
        }
    });
Ad

Answer

First of all thanks for using Chartist :-)

If you're using event delegation you can add one listener to rule them all. You then also don't need to use the draw event, since the listener will be valid even when child nodes will be updated / re-created.

Just add this piece of code to catch all mouseenter / mouseleave events using delegation:

$('#your-chart').on('mouseenter', '.ct-slice-pie', function() {
  var $slice = $(this);
  // Code for showing tooltip, you can use any tooltip library like tooltipster
  // You can get meta data from your slices using $slice.getAttribute('ct:meta');
});
Ad
source: stackoverflow.com
Ad