How to color every bar in google timeline chart?

Question

I have read some other answers here and accordingly added the role property but it did not work.

<Chart
  width={'500px'}
  height={'300px'}
  chartType="Timeline"
  loader={<div>Loading Chart</div>}
  data={[
    [
      { type: 'string', id: 'President' },
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' },
      {type: 'string', role: 'style'}
    ],
    ['Washington', new Date(1789, 3, 30), new Date(1797, 2, 4), 'gold'],
    ['Adams', new Date(1797, 2, 4), new Date(1801, 2, 4), 'color: #ccc'],
    ['Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4), 'gold'],
  ]}
  options={{
    showRowNumber: true,
  }}
  rootProps={{ 'data-testid': '1' }}
/>

refer: https://react-google-charts.com/timeline-chart

score 1 · Accepted Answer · answered Aug 26 '20 at 11:21

on the timeline chart, the style role will only work when used as the third column.

so you will also need to add the second column for bar label.
but you can use null values for that column, if needed...

<Chart
  width={'500px'}
  height={'300px'}
  chartType="Timeline"
  loader={<div>Loading Chart</div>}
  data={[
    [
      { type: 'string', id: 'President' },
      { type: 'string', id: 'Bar' },        // <-- add bar label here...
      { type: 'string', role: 'style' },    // <-- add style role here...
      { type: 'date', id: 'Start' },
      { type: 'date', id: 'End' }
    ],
    ['Washington', null, 'gold', new Date(1789, 3, 30), new Date(1797, 2, 4)],
    ['Adams', null, '#ccc', new Date(1797, 2, 4), new Date(1801, 2, 4)],
    ['Jefferson', null, 'gold', new Date(1801, 2, 4), new Date(1809, 2, 4)],
  ]}
  options={{
    showRowNumber: true,
  }}
  rootProps={{ 'data-testid': '1' }}
/>

score 1 · Answer 2 · answered May 25 '22 at 01:54

I got it! I sorted the bars according the role attribute. I used the role property in data structure.

const data = [ [ { type: "string", id: "Phases" },{ type: "string", id: "Name" }, { type: 'string', role: 'style' }, { type: "date", id: "Start" }, { type: "date", id: "End" } ]];

enter image description here

This is my second answer on Stackoverflow. I still don't understand how to indent the code in the answer.

How to color every bar in google timeline chart?

2 Answers2