CODEWITHSUNDEEP
angularjscolorsbar-chartchart.jsangular-chart
jesus.saad
jesus.saad

Reputation: 189

How can I set different colours for each bar in angular-chart.js v1.0.0?

How can I do that in angular-chart.js v1.0.0 and off course ChartJS v2.1.6

How can I set different colours for each bar in angular-chart.js?

Upvotes: 0

Views: 304

Answers (2)

syed
syed

Reputation: 636

 public barChartColors: Array<any> = [

{
  **backgroundColor: ["#36a2eb", "rgba(47, 132, 71, 0.8)", "rgba(30, 50, 71, 0.8)", "green", "blue", "purple", "orange"
  ],**

  borderColor: 'rgba(105,159,177,1)',

  pointBackgroundColor: 'rgba(105,159,177,1)',

  pointBorderColor: '#fafafa',

  pointHoverBackgroundColor: '#fafafa',

  pointHoverBorderColor: 'rgba(105,159,177)'
},

];

This will provide different color for each bar in a bar-chart.

Upvotes: 0

frlinw
frlinw

Reputation: 562

  • Use one dataset for each bar
  • Set all data to 0 for the dataset except the data you want to show
  • Custom color for each dataset
  • BorderWidth = 0 to hide empy data and stacked = true on X axe
  • Custom tooltip callback to hide empty dataset

example https://jsfiddle.net/3qas1ar8/3/

Upvotes: 2

Related Questions