2

actualmente tengo este código para mostrar un gráfico y quiero cambiar el color del borde. ¿Cómo puedo hacerlo?

<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>

1 respuesta 1

2

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.

15
  • No funciona pero gracias por el aporte ;D
    – PHP LOKKED
    el 23 ago. 2018 a las 16:03
  • @PHPLOKKED ok voy a buscar otras solución para ayudarte
    – zerokira
    el 23 ago. 2018 a las 16:04
  • gracias yo también estoy buscando y probando
    – PHP LOKKED
    el 23 ago. 2018 a las 16:06
  • @PHPLOKKED como se llama la librería de chart que usas y su versión?
    – zerokira
    el 23 ago. 2018 a las 16:54
  • @PHPLOKKED Aun sigues con el problema?
    – zerokira
    el 23 ago. 2018 a las 20:04

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.