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>