Ya que estas usando chart.js
me tome el tiempo para leer un poco su documentación y ver algunos ejemplos claros. Lo que quieres hacer es agregar un borde a tu figura en este caso de tipo doughnut
, para poder hacer esto, chart
nos brinda unas propiedades DataSet
donde puedes aplicar:
backgroundColor, borderColor, borderWidth, hoverBackgroundColor, hoverBorderColor, hoverBorderWidth... Teniendo en cuenta esto, es necesario cambiar la estructura como la estas manejando, a continuación encontraras un gran ejemplo.
var ctx = $("#myChart");
var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
datasets: [{
data: [1, 2],
backgroundColor: [
'red',
'blue'
],
borderColor: [
'green',
"lightgreen"
],
hoverBackgroundColor: [
'black',
'black'
],
labels: [
'text5',
'ext5t'
]
}]
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var dataset = data.datasets[tooltipItem.datasetIndex];
var index = tooltipItem.index;
return dataset.labels[index] + ': ' + dataset.data[index];
}
}
}
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<body>
<div style="width: 200px; height: 200px;">
<canvas id="myChart"></canvas>
</div>
</body>
</html>
Como puedes ver en el ejemplo, hay un objeto datasets
dentro de el data
, donde especificamos que Dataset Properties vamos a usar, en este ejemplo puedes encontrar diferentes recursos a usar y que puedes explorar en la documentación oficial ChartJs.