Implementing a Bubble Pie Chart: A Step-by-Step Guide

Question

I need to implement this:

Honestly, I have no idea how to google this. I'm looking for a Vue/Nuxt solution or any general tips on how to implement this.

Edit: Sorry, I think this is a bad question. I'm not asking for a tutorial on how to make circles. I need to make different charts using API. For anyone else looking for this, I found the Bubble Cloud Chart

in vue-graph

Answer 1

Use simple CSS:

#pie {
  width: 100px;
  height: 100px;
  
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 50%;
  background-color: #F3F3F4;
  
  
  /* Center text */
  display: flex;
  justify-content: center;
  align-items: center;
}

  
32%