javascript - examples - chartjs bordercolor

Color diferente para cada barra en un gráfico de barras; ChartJS

Question

Estoy usando ChartJS en un proyecto en el que estoy trabajando y necesito un color diferente para cada barra en un Gráfico de barras.

Aquí hay un ejemplo del conjunto de datos del gráfico de barras:

var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [20, 59, 80, 81, 56, 55, 40]
}]
};

¿Hay alguna manera de pintar cada barra de manera diferente?

Answer 1

A partir de agosto de 2019, Chart.js ahora tiene esta funcionalidad incorporada.

Simplemente necesita proporcionar una matriz a backgroundColor.

Ejemplo tomado de https://www.chartjs.org/docs/latest/getting-started/

Antes de:

 data: {
labels: [''January'', ''February'', ''March'', ''April'', ''May'', ''June'', ''July''],
datasets: [{
label: ''My First dataset'',
backgroundColor: ''rgb(255, 99, 132)'',
borderColor: ''rgb(255, 99, 132)'',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},

Después:

 data: {
labels: [''January'', ''February'', ''March'', ''April'', ''May'', ''June'', ''July''],
datasets: [{
label: ''My First dataset'',
backgroundColor: [''rgb(255, 99, 132)'',''rgb(0, 255, 0)'',''rgb(255, 99, 132)'',''rgb(128, 255, 0)'',''rgb(0, 255, 255)'',''rgb(255, 255, 0)'',''rgb(255, 255, 128)''],
borderColor: ''rgb(255, 99, 132)'',
data: [0, 10, 5, 2, 20, 30, 45]
}]
},

Acabo de probar este método y funciona. Cada barra tiene un color diferente.

Answer 2

A partir de v2, simplemente puede especificar una matriz de valores para corresponder a un color para cada barra a través de la propiedad backgroundColor :

datasets: [{
label: "My First dataset",
data: [20, 59, 80, 81, 56, 55, 40],
backgroundColor: ["red", "blue", "green", "blue", "red", "blue"],
}],

Esto también es posible para borderColor , hoverBackgroundColor , hoverBorderColor .

De la documentación en las Propiedades del conjunto de datos de gráfico de barras :

Algunas propiedades se pueden especificar como una matriz. Si se establecen en un valor de matriz, el primer valor se aplica a la primera barra, el segundo valor a la segunda barra, y así sucesivamente.

Answer 3

Acabo de recibir este problema recientemente, y aquí está mi solución

var labels = ["001", "002", "003", "004", "005", "006", "007"];
var data = [20, 59, 80, 81, 56, 55, 40];
for (var i = 0, len = labels.length; i < len; i++) {
background_colors.push(getRandomColor());// I use @Benjamin method here
}
var barChartData = {
labels: labels,
datasets: [{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
backgroundColor: background_colors,
data: data
}]
};

Answer 4

Aquí, resolví este problema haciendo dos funciones.

1. dynamicColors () para generar color aleatorio

function dynamicColors() {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgba(" + r + "," + g + "," + b + ", 0.5)";
}

2. poolColors () para crear una variedad de colores

function poolColors(a) {
var pool = [];
for(i = 0; i < a; i++) {
pool.push(dynamicColors());
}
return pool;
}

Entonces, solo pásalo

datasets: [{
data: arrData,
backgroundColor: poolColors(arrData.length),
borderColor: poolColors(arrData.length),
borderWidth: 1
}]

Answer 5

Código basado en la siguiente solicitud de extracción :

datapoint.color = ''hsl('' + (360 * index / data.length) + '', 100%, 50%)'';

Answer 6

Después de buscar en el archivo Chart.Bar.js, he logrado encontrar la solución. He usado esta función para generar un color aleatorio:

function getRandomColor() {
var letters = ''0123456789ABCDEF''.split('''');
var color = ''#'';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

Lo agregué al final del archivo y llamé a esta función dentro del "fillColor:" debajo de

helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.

así que ahora se ve así:

helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.bars.push(new this.BarClass({
value : dataPoint,
label : data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.strokeColor,
fillColor : getRandomColor(),
highlightFill : dataset.highlightFill || dataset.fillColor,
highlightStroke : dataset.highlightStroke || dataset.strokeColor
}));
},this);

y funciona, obtengo un color diferente para cada barra.

Answer 7

Esto funciona para mí en la versión actual 2.7.1 :

function colorizePercentageChart(myObjBar) {
var bars = myObjBar.data.datasets[0].data;
console.log(myObjBar.data.datasets[0]);
for (i = 0; i < bars.length; i++) {
var color = "green";
if(parseFloat(bars[i]) < 95){
color = "yellow";
}
if(parseFloat(bars[i]) < 50){
color = "red";
}
console.log(color);
myObjBar.data.datasets[0].backgroundColor[i] = color;
}
myObjBar.update(); 

}

Answer 8

Generar colores al azar;

function getRandomColor() {
var letters = ''0123456789ABCDEF''.split('''');
var color = ''#'';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

y llamarlo para cada registro;

function getRandomColorEachEmployee(count) {
var data =[];
for (var i = 0; i < count; i++) {
data.push(getRandomColor());
}
return data;
}

finalmente establecer colores;

var data = {
labels: jsonData.employees, // your labels
datasets: [{
data: jsonData.approvedRatios, // your data
backgroundColor: getRandomColorEachEmployee(jsonData.employees.length)
}]
};

Answer 9

Puede generar fácilmente con gráficos de livegap
Seleccione Mulicolors del menú Bar

_{(fuente: livegap.com )}

** la biblioteca de gráficos utilizada es la versión modificada chartnew.js de la biblioteca chart.js
con el código chartnew.js será algo como esto

var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [
{
label: "My First dataset",
fillColor: ["rgba(0,10,220,0.5)","rgba(220,0,10,0.5)","rgba(220,0,0,0.5)","rgba(120,250,120,0.5)" ],
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [20, 59, 80, 81, 56, 55, 40]
}
]
};

Answer 10

Puede llamar a esta función que genera colores aleatorios para cada barra

var randomColorGenerator = function () {
return ''#'' + (Math.random().toString(16) + ''0000000'').slice(2, 8);
};
var barChartData = {
labels: ["001", "002", "003", "004", "005", "006", "007"],
datasets: [
{
label: "My First dataset",
fillColor: randomColorGenerator(),
strokeColor: randomColorGenerator(),
highlightFill: randomColorGenerator(),
highlightStroke: randomColorGenerator(),
data: [20, 59, 80, 81, 56, 55, 40]
}
]
};

Answer 11

Si echa un vistazo a la biblioteca " ChartNew " que se basa en Chart.js, puede hacerlo pasando los valores como una matriz de la siguiente manera:

var data = {
labels: ["Batman", "Iron Man", "Captain America", "Robin"],
datasets: [
{
label: "My First dataset",
fillColor: ["rgba(220,220,220,0.5)", "navy", "red", "orange"],
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [2000, 1500, 1750, 50]
}
]
};

Answer 12

Si no puede usar NewChart.js, solo necesita cambiar la forma de configurar el color usando una matriz. Encuentre la iteración auxiliar dentro de Chart.js:

Reemplace esta línea:

fillColor : dataset.fillColor,

Para este:

fillColor : dataset.fillColor[index],

El código resultante:

//Iterate through each of the datasets, and build this into a property of the chart
helpers.each(data.datasets,function(dataset,datasetIndex){
var datasetObject = {
label : dataset.label || null,
fillColor : dataset.fillColor,
strokeColor : dataset.strokeColor,
bars : []
};
this.datasets.push(datasetObject);
helpers.each(dataset.data,function(dataPoint,index){
//Add a new point for each piece of data, passing any required data to draw.
datasetObject.bars.push(new this.BarClass({
value : dataPoint,
label : data.labels[index],
datasetLabel: dataset.label,
strokeColor : dataset.strokeColor,
//Replace this -> fillColor : dataset.fillColor,
// Whith the following:
fillColor : dataset.fillColor[index],
highlightFill : dataset.highlightFill || dataset.fillColor,
highlightStroke : dataset.highlightStroke || dataset.strokeColor
}));
},this);
},this);

Y en tu js:

datasets: [
{
label: "My First dataset",
fillColor: ["rgba(205,64,64,0.5)", "rgba(220,220,220,0.5)", "rgba(24,178,235,0.5)", "rgba(220,220,220,0.5)"],
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [2000, 1500, 1750, 50]
}
]

Answer 13

Si sabe qué colores desea, puede especificar las propiedades de color en una matriz, de esta manera:

 backgroundColor: [
''rgba(75, 192, 192, 1)'',
...
],
borderColor: [
''rgba(75, 192, 192, 1)'',
...
],

Answer 14

Solución: llame al método de actualización para establecer nuevos valores:

var barChartData = {
labels: ["January", "February", "March"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [20, 59, 80]
}
]
};
window.onload = function(){
var ctx = document.getElementById("mycanvas").getContext("2d");
window.myObjBar = new Chart(ctx).Bar(barChartData, {
responsive : true
});
//nuevos colores
myObjBar.datasets[0].bars[0].fillColor = "green"; //bar 1
myObjBar.datasets[0].bars[1].fillColor = "orange"; //bar 2
myObjBar.datasets[0].bars[2].fillColor = "red"; //bar 3
myObjBar.update();
}

Answer 15

Tomando la otra respuesta, aquí hay una solución rápida si desea obtener una lista con colores aleatorios para cada barra:

function getRandomColor(n) {
var letters = ''0123456789ABCDEF''.split('''');
var color = ''#'';
var colors = [];
for(var j = 0; j < n; j++){
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
colors.push(color);
color = ''#'';
}
return colors;
}

Ahora podría usar esta función en el campo backgroundColor en los datos:

data: {
labels: count[0],
datasets: [{
label: ''Registros en BDs'',
data: count[1],
backgroundColor: getRandomColor(count[1].length)
}]
}

Answer 16

así es como traté: empujé una matriz de "colores", con el mismo número de entradas que número de datos. Para esto, agregué una función "getRandomColor" al final del script. Espero eso ayude...

for (var i in arr) {
customers.push(arr[i].customer);
nb_cases.push(arr[i].nb_cases);
colors.push(getRandomColor());
}
window.onload = function() {
var config = {
type: ''pie'',
data: {
labels: customers,
datasets: [{
label: "Nomber of cases by customers",
data: nb_cases,
fill: true,
backgroundColor: colors
}]
},
options: {
responsive: true,
title: {
display: true,
text: "Cases by customers"
},
}
};
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
function getRandomColor() {
var letters = ''0123456789ABCDEF''.split('''');
var color = ''#'';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}

Answer 17

prueba esto :

 function getChartJs() {
**var dynamicColors = function () {
var r = Math.floor(Math.random() * 255);
var g = Math.floor(Math.random() * 255);
var b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}**
$.ajax({
type: "POST",
url: "ADMIN_DEFAULT.aspx/GetChartByJenisKerusakan",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var labels = r.d[0];
var series1 = r.d[1];
var data = {
labels: r.d[0],
datasets: [
{
label: "My First dataset",
data: series1,
strokeColor: "#77a8a8",
pointColor: "#eca1a6"
}
]
};
var ctx = $("#bar_chart").get(0).getContext(''2d'');
ctx.canvas.height = 300;
ctx.canvas.width = 500;
var lineChart = new Chart(ctx).Bar(data, {
bezierCurve: false,
title:
{
display: true,
text: "ProductWise Sales Count"
},
responsive: true,
maintainAspectRatio: true
});
$.each(r.d, function (key, value) {
**lineChart.datasets[0].bars[key].fillColor = dynamicColors();
lineChart.datasets[0].bars[key].fillColor = dynamicColors();**
lineChart.update();
});
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}