1

tengo un grafico que deseo poder cambiar a color blaco, ya que el fondo debo ponerle un color oscuro, pero no se y he buscado pero no encuentro realmente como cambiar el color del grafico, quisiera saber si es posible y que deberia hacer para esto.

He probado con style="background-color: white;" pero parece que no hace nada.

Adjunto mi grafico:

introducir la descripción de la imagen aquí

Codigo del grafico:

var lineData = {
                labels: label,
                datasets: [{
                    label: "Peso",
                    backgroundColor: '#a7281a',
                    borderColor: "#a7281a",
                    pointBackgroundColor: "#a7281a",
                    pointBorderColor: "#fff",
                    data: data,
                }, ]
            };

            var lineOptions = {
                responsive: true,
                animation: {
                    onComplete: function(){
                        var ctx = this.chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset){
                            for(var i = 0; i < dataset.data.length; i++){
                                for(var key in dataset._meta){
                                    var model = dataset._meta[key].data[i]._model;
                                    ctx.fillText(dataset.data[i], model.x, model.y - 5);
                                }
                            }
                        });
                    }
                }
            };

            ctx = document.getElementById("lineChart").getContext("2d");
            myChart = new Chart(ctx, {
                type: 'line',
                data: lineData,
                options: lineOptions,
            });

Gracias de ante mano :)

2 respuestas 2

0

tengo un grafico que deseo poder cambiar a color blaco, ya que el fondo debo ponerle un color oscuro.

Lo que sucede con style="background-color: white;" es que es una propiedad de CSS, la cual entra en conflicto con la librería de chart.js.

Siempre que se pueda es recomendable trabajar todo desde Javascript.

Para cambiar el color de los datasets a blanco solo tienes que modificar las propiedades de:

backgroundColor: '#ffffff73', // Fondo del gráfico
borderColor: "#f1f0f0", // Lineas que bordean el gráfico
pointBackgroundColor: "#cfcfcf", // Punto del gráfico
pointBorderColor: "#fff", // Circunferencia que bordean el punto del gráfico 


En cuanto al fondo detrás del gráfico si iniciaste en usar CSS puedes insertar tu style de la siguiente forma:

<canvas id="lineChart" width="400" height="400" style="background-color: rgba(0, 0, 0, 0.500)"></canvas>

Establecí un blanco con una pequeña transparencia.

Esto funcionara pero tiene un inconveniente y es que nos tapara los números (valores) y los nombres (pesos) de nuestro gráfico.
Para solventar esto necesitamos modificar los parámetros de lineOptions del siguiente modo.

var lineData = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
      label: "Peso",
      backgroundColor: '#ffffff73', // Fondo del gráfico
      borderColor: "#f1f0f0", // Lineas que bordean el gráfico
      pointBackgroundColor: "#cfcfcf", // Punto del gráfico
      pointBorderColor: "#fff", // Circunferencia que bordean el punto del gráfico         
      data: [12, 19, 3, 5, 2, 3],
  }, ],
};

var lineOptions = {
  responsive: true,
  animation: {
      onComplete: function(){
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.fillStyle = 'white';
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset){
              for(var i = 0; i < dataset.data.length; i++){
                  for(var key in dataset._meta){
                      var model = dataset._meta[key].data[i]._model;
                      ctx.fillText(dataset.data[i], model.x, model.y - 5);
                  }
              }
          });
      }
  },
  legend: {
    labels: {
        fontColor: "#fff",
        fontSize: 13
    }
},
  scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          fontColor : "#fff",
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
          ticks: {
          fontColor : "#fff",
            maxTicksLimit: 5,
            padding: 10,
          },
          gridLines: {
            color: "rgb(234, 236, 244)",
            zeroLineColor: "rgb(234, 236, 244)",
            drawBorder: false,
            borderDash: [2],
            zeroLineBorderDash: [2]
          }
        }],
  }
},









ctx = document.getElementById("lineChart").getContext("2d");
myChart = new Chart(ctx, {
  type: 'line',
  data: lineData,
  options: lineOptions,
});
<canvas id="lineChart" width="400" height="400" style="background-color: rgba(0, 0, 0, 0.500)"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>


Establecí lineas detrás del fondo que siguen el recorrido del valor para que el usuario pueda entender con mayor facilidad del gráfico.
Se puede modificar el color o eliminarlo, solo busque gridLines

Actualización

Si deseas cambiar el color de los ejes lo puedes lograr modificando los parámetros de xAxes y yAxes luego edita fontColor; de igual forma puedes cambiar el color de los valores encima del gráfico en el aparatado ctx.fillStyle

Por ejemplo un color amarillo en los ejes y un color naranja en los valores encima del gráfico.

var lineData = {
  labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
  datasets: [{
      label: "Peso",
      backgroundColor: '#ffffff73', // Fondo del gráfico
      borderColor: "#f1f0f0", // Lineas que bordean el gráfico
      pointBackgroundColor: "#cfcfcf", // Punto del gráfico
      pointBorderColor: "#fff", // Circunferencia que bordean el punto del gráfico         
      data: [12, 19, 3, 5, 2, 3],
  }, ],
};

var lineOptions = {
  responsive: true,
  animation: {
      onComplete: function(){
          var ctx = this.chart.ctx;
          ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
          ctx.fillStyle = 'orange'; //Color del valor encima del gráfico 
          ctx.textAlign = 'center';
          ctx.textBaseline = 'bottom';

          this.data.datasets.forEach(function (dataset){
              for(var i = 0; i < dataset.data.length; i++){
                  for(var key in dataset._meta){
                      var model = dataset._meta[key].data[i]._model;
                      ctx.fillText(dataset.data[i], model.x, model.y - 5);
                  }
              }
          });
      }
  },
  legend: {
    labels: {
        fontColor: "#fff",
        fontSize: 13
    }
},
  scales: {
      xAxes: [{
        time: {
          unit: 'date'
        },
        gridLines: {
          display: false,
          drawBorder: false
        },
        ticks: {
          fontColor : "#ffff00", //Color eje X
          maxTicksLimit: 7
        }
      }],
      yAxes: [{
          ticks: {
          fontColor : "#ffff00", //Color eje Y
            maxTicksLimit: 5,
            padding: 10,
          },
          gridLines: {
            color: "rgb(234, 236, 244)",
            zeroLineColor: "rgb(234, 236, 244)",
            drawBorder: false,
            borderDash: [2],
            zeroLineBorderDash: [2]
          }
        }],
  }
},









ctx = document.getElementById("lineChart").getContext("2d");
myChart = new Chart(ctx, {
  type: 'line',
  data: lineData,
  options: lineOptions,
});
<canvas id="lineChart" width="400" height="400" style="background-color: rgba(0, 0, 0, 0.500)"></canvas>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Chart.min.js"></script>

4
  • Veo que esto funciona...pero..igual sigo con mi duda, si por ejemplo quiero cambiar el color de los valores del eje izquierdo y el eje bajo, como haria eso, es lo que mas necesito :( son los que tienen los valores, y las fechas
    – Juan94
    Commented el 19 may. 2020 a las 0:26
  • Eso es fácil, para lograrlo solo debes modificar el aparatados de los ejes. busca xAxes y yAxes, luego fontColor en ambos, veras que tienen un color hexadecimal #fff tan solo cámbialo por el color que necesites. Ej: el amarillo es: #ffff00
    – Link_HG
    Commented el 19 may. 2020 a las 2:41
  • Actualizo la publicación para explicarme mejor, échale un vistazo
    – Link_HG
    Commented el 19 may. 2020 a las 3:20
  • 1
    Gracias ya funciono :)
    – Juan94
    Commented el 20 may. 2020 a las 3:35
0

Para cambiar el color del gráfico lo puedes hacer sobre backgroundColor de la variable lineData, y para cambiar el color del canvas por css.

var lineData = {
                labels: [1,2,3,4,5],
                datasets: [{
                    label: "Peso",
                    backgroundColor: '#fff',
                    borderColor: "#a7281a",
                    pointBackgroundColor: "#a7281a",
                    pointBorderColor: "#fff",
                    data: [100,200,150,300,50],
                }, ]
            };

            var lineOptions = {
                responsive: true,
                animation: {
                    onComplete: function(){
                        var ctx = this.chart.ctx;
                        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                        ctx.fillStyle = "black";
                        ctx.textAlign = 'center';
                        ctx.textBaseline = 'bottom';

                        this.data.datasets.forEach(function (dataset){
                            for(var i = 0; i < dataset.data.length; i++){
                                for(var key in dataset._meta){
                                    var model = dataset._meta[key].data[i]._model;
                                    ctx.fillText(dataset.data[i], model.x, model.y - 5);
                                }
                            }
                        });
                    }
                }
            };

            ctx = document.getElementById("lineChart").getContext("2d");
            myChart = new Chart(ctx, {
                type: 'line',
                data: lineData,
                options: lineOptions,
            });
canvas#lineChart {
  background-color: #444;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="lineChart" style="display: block; width: 392px; height: 256px;" width="392" height="256" class="chartjs-render-monitor"></canvas>

Tu Respuesta

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

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