Hello hm

Thanks for reaching out to us.

Unfortunately, you can't add the same chart twice on a same page. You can, however, duplicate the chart, and when it generates a new shortcode, you can use that. It will be the same chart, but with a different shortcode, so you should be able to add it.

Hi again, you're welcome.

Well, you could do that with some conditional formatting, and CSS.

Something like rectangles in the last column of our Premier League Table, or stars in Catalog of Books table.

For example - in the Catalog of Books table:

This is an SQL Query based table, and the data in "Average Rating" column is saved as float values. Each value representing a star.

Then we added conditional formatting rules:

Where we changed cell content based on the values:

So, if above 4.6 set content to <span class="stars-container stars-96">★★★★★</span>

Above 4.4 set content to <span class="stars-container stars-90">★★★★★</span>

Above 4.2 set content to <span class="stars-container stars-85">★★★★★</span>

Above 4 set content to <span class="stars-container stars-80">★★★★★</span>

Above 3.5 set content to <span class="stars-container stars-70">★★★★★</span>

Above 3 set content to <span class="stars-container stars-60">★★★★★</span>

Then, in main settings of wpDataTables/Custom JS and CSS/Custom CSS we added this:

.stars-container{
font-size:20px !important;
}
.stars-container { position: relative; display: inline-block; color: transparent; font-size: 50px;
line-height:normal;
}
.stars-container::before{ position: absolute; top: 0; left: 0; content: '★★★★★'; color:lightgray;
}
.stars-container::after { position: absolute; top: 0; left: 0; content: '★★★★★'; color: gold; overflow: hidden;
}
.stars-0::after { width: 0%; }
.stars-10::after { width: 10%; }
.stars-20::after { width: 20%; }
.stars-30::after { width: 30%; }
.stars-40::after { width: 40%; }
.stars-50::after { width: 50%; }
.stars-60::after { width: 60%; }
.stars-70::after { width: 70%; }
.stars-80::after { width: 80%; }
.stars-85::after { width: 85%; }
.stars-90::after { width: 90%; }
.stars-96::after { width: 96%; }
.stars-100::after { width: 100%; }

And that is it.

I hope that helps.

You're welcome hm.

Glad I could help.

If you have any further questions or issues, please feel free to open a new ticket, and we'll gladly help.

Best regards.