React-vis-timeline - cannot initialize items data

Question

I have a problem with vis timeline initialization. Timeline is visible but without any data. I've tried to pass items in different formats but it looks like in attached image. What is a problem with that? My react component:

import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'

const items = [{
    id: 1,
    start: new Date(2025, 7, 15),
    end: new Date(2025, 8, 2),
    content: 'Test 1',
},
{
    id: 2,
    start: new Date(2025, 7, 17),
    end: new Date(2025, 8, 3),
    content: 'Test 2',
}
];

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

class Timeline2D extends React.Component {

    render() {
        return <Timeline options={options} initialItems={items} />;
    }
}

export default Timeline2D;

Result

papec.23 · Accepted Answer · 2020-08-06T10:55:40.127

To fix this issue I need to set groups. See correct example:

import React from 'react';
import 'vis-timeline/styles/vis-timeline-graph2d.min.css';
import Timeline from 'react-vis-timeline'

const items = [{
    id: 1,
    group: 1,
    start: '2014-04-20',
    end: '2014-04-26',
    content: 'Test 1',
},
{
    id: 2,
    group: 2,
    start: '2014-04-22',
    end: '2014-04-29',
    content: 'Test 2',
}
];

const groups = [{
    id: 1,
    content: 'Group 1',
},
{
    id: 2,
    content: 'Group 2',
}
];

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

class Timeline2D extends React.Component {

    render() {
        return <Timeline options={options} initialItems={items} initialGroups={groups}/>;
    }
}

export default Timeline2D;

React-vis-timeline - cannot initialize items data

1 Answers1