Edito mi respuesta porque he cometido un grave error:
En JQuery el método data()
solo permite obtener los valores de los atributos data-
Para modificar los valores de los atributos data-
se usa, como bien lo haces en tu pregunta, el método attr()
Using the data() method to update data does not affect attributes in the DOM. To set a data-* attribute value, use attr.
Ahora bien, respondiendo a porque no funcionario tu código, quiero pensar que es porque no hay nada que desencadene el proceso $('#porcentajes').data('percentage', 100);
Lo que podrías hacer es poner esa linea de código dentro de la función $( document ).ready()
que lo que hace es detectar cuando la pagina esta lista para ejecutar código javascript
Te dejo el código con las recomendaciones aplicadas.
*Hice que el div
fuera visible solo para fines prácticos, si inspeccionas el elemento te darás cuenta que ya tiene el valor especificado.
#porcentajes{
width: 100px;
height: 100px;
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo">
<div class="circlechart" id="porcentajes" data-percentage="0"></div>
</div>
<script type=text/javascript>
$( document ).ready(function() {
$('#porcentajes').attr('data-percentage', 100);
});
</script>