G2 timeline sample

G2-timeline-README.md

Generate timeline by G2

index.html

<div id="container" />

index.ts

import { Chart } from '@antv/g2';

const chart = new Chart({
  container: 'container',
  paddingLeft: 60,
  paddingRight: 60,
  width: 1000,
  height: 200,
});

const data = [
  {
    date: "2024-01-01",
    text: 'Symphony No. 41 "Jupiter"',
  },
  {
    date: "2024-01-02",
    text: 'Prelude to the Afternoon of a Faun',
  },
  {
    date: "2024-03-01",
    text: 'Symphony No. 3 "Eroica"',
  },
  {
    date: "2024-04-01",
    text: 'Rite of Spring',
  },
  {
    date: "2024-05-01",
    text: 'Goldberg Variations',
  },
  {
    date: "2024-06-01",
    text: 'Piano Concerto No. 2',
  },
  {
    date: "2024-07-01",
    text: 'A Midsummer Night\'s Dream "Overture"',
  },
];

for (let i = 0; i < data.length; i++) {
  data[i].day = new Date(data[i].date).getTime() / 1000 / 60 / 60 / 24;
}

chart.data(data);


chart
    .line()
    .encode('x', 'day')
    .encode('y', 1)
    .style('lineWidth', 1)
    .style('stroke', '#000')
    .attr('zIndex', 1)
    .label({
      text: 'date',
      dy: (d) => (d.day % 2 === 1 ? 8 : -4),
      textAlign: 'center',
      textBaseline: (d) => (d.day % 2 === 1 ? 'top' : 'bottom'),
    })
    .label({
      text: (d) => d.text,
      dy: (d) => (d.day % 2 === 0 ? 28 : -28),
      textAlign: 'center',
      textBaseline: (d) => (d.day % 2 === 0 ? 'top' : 'bottom'),
      wordWrap: true,
      wordWrapWidth: 120,
      connector: true,
    })
    .axis(false);

chart
    .point()
    .encode('x', 'day')
    .encode('y', 1)
    .attr('zIndex', 1)
    .style('lineWidth', 1.5)
    .style('stroke', '#000')
    .style('fill', '#fff');

chart.interaction('tooltip', false);

chart.render();

package.json

{
  "dependencies": {
    "@antv/g2": "latest"
  },
  "devDependencies": {
    "typescript": "latest"
  },
  "main": "index.ts"
}