CODEWITHSUNDEEP
reactjsreact-google-charts
user12323452
user12323452

Reputation:

How to change colors of individual bars based on some property in Timeline Component?

I am using this Google Timeline Component. I need to use colors based on the one of the column property is there a way to do that? I want all bars with one property to have same color not different.

Upvotes: 0

Views: 192

Answers (2)

Leandro Ouriques
Leandro Ouriques

Reputation: 21

  1. You can create arrays to define bar color for each different property.

  2. When you define the data, you can use the role property to define a color of bar. https://developers.google.com/chart/interactive/docs/roles#stylerole const data = [ [ { type: "string", id: "Phases" }, { type: "string", id: "Name" }, { type: 'string', role: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];

  3. Finally, you concat the arrays in Chart data. data={[...data, ...firstArray, ...secondArray]}

This is my first answer in stackoverflow. I hope I helped you.

Upvotes: 1

Eisa Rezaei
Eisa Rezaei

Reputation: 563

use this code

export const options = {
  title: "Company Performance",
  curveType: "function",
  legend: { position: "bottom" },
  colors:["green"]
};

change the color key to have different colors

Upvotes: 0

Related Questions