'Rendering labels + icons for each arc element in doughnut chart (Vue-chartjs 4.0.2 + chartjs 3.7.1)

For my job I need to reproduce this doughnut Chart for our website that is using Vue Js: enter image description here

I already succeeded in creating the doughnut chart using this library (vue-chartjs) but I’m really struggling with completing the arcs elements with icon + the labels of each arc elements. I want to know if it is possible to add in each arc element an icon + the label attached to this arc element as in the image I uploaded.

I already tried to do it with a html / js project but I only succeeded in rendering images in arc elements but It’s quite difficult to have a good render with images with different sizes etc..

My environment is the following :

  • Vue JS : 2.6.12
  • Vue-chartjs : 4.0.2
  • chart.js : 3.7.1

Any answer would be appreciated :D

Kind regards,

Calab. Here is the doughnut Chart I want to reproduce :)

vue.jschart.jsvue-chartjs


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions