1

//https://www.react-google-charts.com/examples/timeline

import { Chart } from "react-google-charts";
export function GoogleTimeLineChart(props){

const data source=[[{"type":"string","id":"Plan"},{"type":"string","id":"Job"},{"type":"date","id":"Start"},{"type":"date","id":"End"}],["Base Line","1","2022-08-05T04:30:00.000Z","2022-08-05T04:35:00.000Z"],["Base Line","2","2022-08-05T05:00:00.000Z","2022-08-05T05:05:00.000Z"],["Base Line","3","2022-08-05T05:30:00.000Z","2022-08-05T05:35:00.000Z"],["Base Line","4","2022-08-05T06:00:00.000Z","2022-08-05T06:05:00.000Z"],["Base Line","5","2022-08-05T06:40:00.000Z","2022-08-05T06:45:00.000Z"],["Base Line","6","2022-08-05T07:05:00.000Z","2022-08-05T07:10:00.000Z"],["Base Line","7","2022-08-05T07:40:00.000Z","2022-08-05T07:45:00.000Z"],["Actual",".1","2022-08-05T04:47:00.000Z","2022-08-05T04:52:00.000Z"],["Actual",".2","2022-08-05T05:10:00.000Z","2022-08-05T05:15:00.000Z"],["Actual",".3","2022-08-05T05:50:00.000Z","2022-08-05T05:55:00.000Z"],["Actual",".4","2022-08-05T06:20:00.000Z","2022-08-05T06:25:00.000Z"],["Actual",".5","2022-08-05T06:30:00.000Z","2022-08-05T06:35:00.000Z"],["Actual",".6","2022-08-05T06:50:00.000Z","2022-08-05T06:55:00.000Z"],["Revised","7.","2022-08-05T07:35:00.000Z","2022-08-05T07:40:00.000Z"]]
const colors=["#062373","#062373","#062373","#062373","#062373","#062373","#062373","green","red","red","red","red","green","green"]

return (
 <Chart
      chartType="Timeline"
      data={dataSource}
      width="100%"
      height="500px"
      options={{
        colors: [...colors],
      }}
    />
)
}

How can to draw vertical line in this react google timeline chart here i have uploaded my code output

  • Hope this helps: https://stackoverflow.com/questions/52891016/how-can-i-add-a-vertical-line-on-the-x-axis-in-a-google-chart-chart-line-type – D. Nguyen Aug 24 '22 at 07:45

0 Answers0