Estoy tratando de obtener un resultado como el de la imagen: un gráfico circular tipo donut que la línea sea delgada y colocar un texto y un gráfico al centro. Estoy trabajando con chart.js
alguna sugerencia ?
<head>
<script src="http://www.chartjs.org/dist/2.6.0/Chart.bundle.js"></script>
<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<link rel="stylesheet" href="">
</head>
<body>
<div id="canvas-holder" style="width:40%">
<canvas id="chart-area" />
</div>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var config = {
type: 'doughnut',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: ['#fba901',
'#94d31e',
'#44c1c6',
'#87d9fa',
]
}]
},
options: {
responsive: true,
tooltips: {
enabled: false
},}
};
window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, config);
};
</script>
Esta gráfica es lo que trato de obtener: