Border Color for Bar Graphs

1

Hi I’m Trying to create a pdf download with this URL:

https://quickchart.io/chart?c={type:'bar',data:{labels:["Empathy", "Resonance", "Optimism", "Self-Esteem", "EROS"],datasets:[{label:'Self',backgroundColor: 'rgba(100, 55, 165, 0.61)', borderColor: 'rgba(100,55,165,1)', data:[58.3,47.8,55.8,78,59.9]},{label:'A',backgroundColor: 'rgba(242, 142, 43, 0.68)',borderColor:'rgb(255,151,52)',data:[70,59.5,71.8,56.8,64.5]},{label:'B',backgroundColor: 'rgba(242, 142, 43, 0.48)',borderColor:'rgb(255,151,52)',data:[,,,,]},{label:'C',backgroundColor: 'rgba(242, 142, 43, 0.20)',borderColor:'rgb(255,151,52)',data:[,,,,]},{label:'D',backgroundColor: 'rgba(242, 142, 43, 0.07)',borderColor:'rgb(255,151,52)',data:[,,,,]}]},options:{title:{display:true,text:'Steph Foster EROS 360 Results',}}}&format=pdf

However, none of the border colours are working. Am I formatting it wrong?
Also is there anyway to embed a logo into the chart, some branding would be great!

Cameron

2

Hi Cameron,

You need to set borderWidth to a value >= 1.

For example:

{
      label: 'Self',
      backgroundColor: 'rgba(100, 55, 165, 0.61)',
      borderColor: 'rgb(255,251,52)',
      data: [58.3, 47.8, 55.8, 78, 59.9],
      borderWidth: 1,
    }, {
      label: 'A',
      backgroundColor: 'rgba(242, 142, 43, 0.68)',
      borderColor: '#000',
      data: [70, 59.5, 71.8, 56.8, 64.5],
      borderWidth: 3,
    },

Link to chart editor

image
image1000×600 29 KB

3

Ahh legend! That’s exactly what I need!

1 Like