Is there any way to set background-color by label in google chart?

Question

I'm using react google timeline chart to display data.

I want label background like: Thomas Jefferson -> red, George Washington -> Green, John Jay -> yellow, John Adams -> Orange

I'm using color option of the chart like:

options={{
    colors: ['red', 'orange', 'yellow', 'green'],

}}

My chart code is like below:

<Chart
width={'100%'}
height={'400px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
    [
        { type: 'string', id: 'Position' },
        { type: 'string', id: 'Name' },
        { type: 'date', id: 'Start' },
        { type: 'date', id: 'End' },
    ],
    [
        'President',
        'George Washington',
        new Date(2019, 2, 4),
        new Date(2019, 3, 30),
    ],
    [
        'President',
        'Thomas Jefferson',
        new Date(2019, 2, 4),
        new Date(2019, 4, 4),
    ],
    [
        'Vice President',
        'John Adams',
        new Date(2019, 3, 21),
        new Date(2019, 6, 4),
    ],
    [
        'Secretary of State',
        'John Jay',
        new Date(2019, 5, 4),
        new Date(2019, 8, 20),
    ],
    [
        'President',
        'John Adams',
        new Date(2019, 2, 25),
        new Date(2019, 8, 22),
    ],
    [
        'Vice President',
        'George Washington',
        new Date(2019, 7, 22),
        new Date(2019, 11, 31),
    ],
]}
options={{
    colors: ['red', 'orange', 'yellow', 'green'],

}}
rootProps={{ 'data-testid': '7' }}
/>

Can anyone help? Thanks in advance.

Answer 1

Here is the Solution what I found.

<Chart
width={'100%'}
height={'400px'}
chartType="Timeline"
loader={<div>Loading Chart</div>}
data={[
    [
        { type: 'string', id: 'Position' },
        { type: 'string', id: 'Name' },
        { type: 'string', id: 'style', role: 'style' },
        { type: 'date', id: 'Start' },
        { type: 'date', id: 'End' },
    ],
    [
        'President',
        'George Washington',
        'green'
        new Date(2019, 2, 4),
        new Date(2019, 3, 30),
    ],
    [
        'President',
        'Thomas Jefferson',
        'red',
        new Date(2019, 2, 4),
        new Date(2019, 4, 4),
    ],
    [
        'Vice President',
        'John Adams',
        'orange',
        new Date(2019, 3, 21),
        new Date(2019, 6, 4),
    ],
    [
        'Secretary of State',
        'John Jay',
        'yellow',
        new Date(2019, 5, 4),
        new Date(2019, 8, 20),
    ],
    [
        'President',
        'John Adams',
        'orange',
        new Date(2019, 2, 25),
        new Date(2019, 8, 22),
    ],
    [
        'Vice President',
        'George Washington',
        'green',
        new Date(2019, 7, 22),
        new Date(2019, 11, 31),
    ],
]}
rootProps={{ 'data-testid': '7' }}
/>

Answer 2

your color array sequence must be the same as your provide data array, first data name will take first color from colorArray.

import React from "react";
import ReactDOM from "react-dom";
import Chart from "react-google-charts";
class App extends React.Component {
 getColors() {
  let colorArray = [];
   rows.forEach((item, index) => {
    // logic to push color name in colorArray as as data index
   })
   return colorArray;
 }
 render() {
  return (
    <div className="App">
    <Chart
      width={"100%"}
      height={"400px"}
      chartType="Timeline"
      loader={<div>Loading Chart</div>}
      data={[
        [
          { type: "string", id: "Position" },
          { type: "string", id: "Name" },
          { type: "date", id: "Start" },
          { type: "date", id: "End" }
        ],
        [
          "President",
          "Thomas Jefferson",
          new Date(2019, 2, 4),
          new Date(2019, 5, 4)
        ],
        [
          "Vice President",
          "John Adams",
          new Date(2019, 3, 21),
          new Date(2019, 6, 4)
        ],
        [
          "Secretary of State",
          "John Jay",
          new Date(2019, 5, 4),
          new Date(2019, 8, 20)
        ],
        [
          "Vice President",
          "George Washington",
          new Date(2019, 7, 22),
          new Date(2019, 11, 31)
        ]
      ]}
      options={{
        colors: this.getColors()
      }}
      rootProps={{ "data-testid": "7" }}
    />
  </div>
  );
 }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 3

Instead of color name use color code. https://react-google-charts.com/timeline-chart#setting-individual-bar-colors

options = {{ colors: ['#FF0000', '#FFA500', '#FFFF00', '#00FF00'] }};