[Chartjs]-Having trouble with Charts.js colors

by

2👍

✅

This is because you define your collors as arrays, if you want a static color you need to supply only 1 static color like so:

const colors = [
  'rgba(138, 20, 21, 0.8)',
  'rgba(241, 16, 22, 0.8)',
  'rgba(249, 148, 0, 0.8)'
];

const chartData = {
  labels: years,
  datasets: Object.keys(dataByTypes).map((key, i) => ({
    text: 'Yearly growth',
    label: key,     // TODO: Make the font colour white
    data: dataByTypes[key],
    hoverBackgroundColor: 'rgba(211, 211, 211, 0.8)',
    borderColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
    backgroundColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
    pointBackgroundColor: colors[i % colors.length], // Get color for this index, roll over if index is larger then array size
    fill: true,
    borderWidth: 2,
    cubicInterpolationMode: 'monotone',
    //stepped:  'middle',
    stepped: false,
    borderJoinStyle: "round",
    tension: 0.2,
  }))
};

Leave a comment