2

Currently, I have an alternating background color in the timeline that I have created using Google charts. Here is the chart component:

return (
        <div class="row" style={{ marginBottom: 30, zoom: "75%" }}>
            <Chart
                width={'100%'}
                height={'200px'}
                chartType="Timeline"
                loader={<div>Loading Chart</div>}
                columns={
                    [
                        { type: 'string', id: 'Position' },
                        { type: 'string', id: 'Name' },
                        { type: 'date', id: 'Start' },
                        { type: 'date', id: 'End' },
                    ]
                }
                rows={
                    timelineData.map((data, idx) => (
                        [
                            data.type,
                            data.name,
                            new Date(data.ysD, data.msD, data.dsD),
                            new Date(data.yeD, data.meD, data.deD)
                        ]
                    ))
                }
                options={{
                    timeline: {
                        colorByRowLabel: true,
                    },
                    backgroundColor: {
                        fill: 'white'
                    }
                }}
                rootProps={{ 'data-testid': '3' }}
            />
        </div>
    )

And here is how it looks like:

enter image description here

I want to remove that alternating grey color and just want to keep the white color for every row. Is there a way to do that inside React?

Quisee
  • 27
  • 4
ShridharK
  • 365
  • 2
  • 14
  • will you please share a link to the reference for the react google charts library you are using? – WhiteHat Feb 23 '21 at 14:42
  • Here it is: https://react-google-charts.com/timeline-chart . Let me also know if you need a link to my question where you can see my code as well. Thanks! – ShridharK Feb 23 '21 at 15:04
  • take a look at the [interactions page](https://react-google-charts.com/user-selection). you can use the ready event in the same manner as the select event in the example. then use the same code to change the colors – WhiteHat Feb 23 '21 at 17:18
  • Sorry, but it's still a bit unclear. I basically want to keep my background color to white throughout all the rows without the grey color that comes in between. How can I edit the code in the link you sent to achieve that. I'm also a bit new to React so something which is looking obvious to you is not obvious to me. – ShridharK Feb 23 '21 at 17:38
  • You can also check this link out, where a user has answered by adding a code with regards to svg where he is setting the stroke color. But I don't know where to paste the code that he has added inside my React component. Here is the link: https://stackoverflow.com/questions/22418436/how-to-set-background-to-transparent-in-google-timeline-chart – ShridharK Feb 23 '21 at 17:51

0 Answers0