Change color of border in Chartjs


I currently have this code to show a graphic and I want to change the color of the border. How can I do it?

<canvas id="chart" width="200px" height="200px"></canvas>
<script type="text/javascript">
        var ctx = $("#chart").get(0).getContext("2d");
        var data = [
                value: 5,
                color: "red",
                highlight: "red",
                label: "text5"
                value: 1,
                color: "blue",
                highlight: "blue",
                label: "ext5t"
        var chart = new Chart(ctx).Doughnut(data);
asked by PHP LOKKED 23.08.2018 в 17:49

1 answer


Since you are using chart.js I take the time to read your documentation a little and see some clear examples. What you want to do is add an edge to your figure in this case of type doughnut , to be able to do this, chart gives us some properties DataSet where you can apply:
backgroundColor , borderColor , borderWidth , hoverBackgroundColor , hoverBorderColor , hoverBorderWidth ... Keeping in account this, it is necessary to change the structure as you are driving, below you will find a great example.

var ctx = $("#myChart");
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [1, 2],
            backgroundColor: [
            borderColor: [
            hoverBackgroundColor: [
            labels: [
    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] + ': ' +[index];
<!DOCTYPE html>
    <script src=""></script>
    <script src=""></script>
    <div style="width: 200px; height: 200px;">
       <canvas id="myChart"></canvas>

As you can see in the example, there is a datasets object within data , where we specify that Dataset Properties We will use, in this example you can find different resources to use and that you can explore in the official documentation ChartJs .

answered by 23.08.2018 / 17:58