Change color of border in Chartjs

Question

Change color of border in Chartjs

Navigation

#1 by (2 votes)

2

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">
    $(document).ready(function(){
        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);
    });
</script>

javascript chart.js

asked by PHP LOKKED 23.08.2018 в 17:49

source

1 answer

Browse JavaScript object Parent component does not detect event triggered by child

score 2 · Accepted 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: [
                '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>

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 .