react-google-chart Timeline label clickable

Question

I'm creating a Timeline chart using react-google-chart. I'd like to make it so that every row works as a dropdown - when label is clicked more information is shown below (eventually that should show another timeline with more details). I created a timeline and tried to play with the events. Click event works but only on data rows, not on labels. Is there a way to do this? Or maybe there is another chart library that would work better?

xport default function Timeline({schedule}) {
    const columns = [
        { type: 'string', id: 'Key' },
        { type: 'string', id: 'Value' },
        { type: 'date', id: 'Start' },
        { type: 'date', id: 'End'}
    ]

    const rows = [
      ["John", 32, new Date("2023-01-01"), new Date("2023-02-01")],
      ["Libby", 41, new Date("2023-04-01"), new Date("2023-06-01")],
      ["Joe", 22, new Date("2023-05-01"), new Date("2023-07-01")],
      ["Maria", 42, new Date("2023-01-01"), new Date("2023-03-01")],
      ["Kate", 36, new Date("2023-07-01"), new Date("2023-08-01")],
      ["Max", 67, new Date("2023-06-01"), new Date("2023-09-01")],
      ["Miranda", 19, new Date("2023-09-01"), new Date("2023-10-01")],
      ["Karen", 25, new Date("2023-02-01"), new Date("2023-03-01")]
    ];

    const chartEvents = [
        {
            eventName: "ready",
            callback: ({ chartWrapper, google }) => {
                const chart = chartWrapper.getChart();
                google.visualization.events.addListener(chart, "select", e => {
                    console.warn(chart);
                });
            }
        }
    ]

    const data = [columns, ...rows]

    return <Chart
        chartType="Timeline"
        data={data}
        width="100%"
        height="400px"
        chartEvents={chartEvents}
    />;

}

Answer 1

The react-google-charts library may not directly support making the labels clickable so You can use the vis-timeline library, which allows for more flexibility in handling events and provides more customization options or even creating a custom component for your timeline chart.

import React, { useState, useEffect } from 'react';
import { Timeline } from 'vis-timeline/standalone';

export default function CustomTimeline({ schedule }) {
  const [timeline, setTimeline] = useState(null);

  const options = {
    width: '100%',
    height: '400px',
  };

  const events = [
    { id: 1, content: 'John', start: '2023-01-01', end: '2023-02-01' },
    { id: 2, content: 'Libby', start: '2023-04-01', end: '2023-06-01' },
    { id: 3, content: 'Joe', start: '2023-05-01', end: '2023-07-01' },
    { id: 4, content: 'Maria', start: '2023-01-01', end: '2023-03-01' },
    { id: 5, content: 'Kate', start: '2023-07-01', end: '2023-08-01' },
    { id: 6, content: 'Max', start: '2023-06-01', end: '2023-09-01' },
    { id: 7, content: 'Miranda', start: '2023-09-01', end: '2023-10-01' },
    { id: 8, content: 'Karen', start: '2023-02-01', end: '2023-03-01' },
  ];

  useEffect(() => {
    const container = document.getElementById('timeline-container');
    const newTimeline = new Timeline(container, events, options);

    newTimeline.on('select', (properties) => {
      const selectedItem = events.find((event) => event.id === properties.items[0]);
      console.log('Selected Item:', selectedItem);
      // Handle displaying more information for the selected item
    });

    setTimeline(newTimeline);

    return () => {
      if (newTimeline) {
        newTimeline.destroy();
      }
    };
  }, [events, options]);

  return <div id="timeline-container" />;
}