Styling

By default the timeline will display every element with the same color:

Let's see how to bring some colors into this.

Barchart styling

The simplest way to style barchart is to set fill and stroke properties in CSS:

.bar-item{
  stroke: #ff9914;
  fill: #ff9914;
}

Nodes get the node class and edges get the edge class, so if you want to style the bars generated by edges, jut use the selector:

.bar-item.edge{
  stroke: #9914ff;
  fill: #9914ff;
}

If you specified a nodeGroupIdFunction, then your groups will have the same class as the id returned by your nodeGroupIdFunction. Let's say nodeGroupIdFunction returns either car either person, then you can style car and person bars like this

.bar-item.car{
  stroke: #ff9914;
  fill: #ff9914;
}
.bar-item.person{
  stroke: #08f;
  fill: #08f;
}

To go further into barchart customization, you can pass options within the controller:

const timelinePlugin = new TimelinePlugin(ogma, container, {
  barchart: {
    graph2dOptions: {
      barChart:{ sideBySide: true},
      // here pass more options if you like
    },
    nodeGroupIdFunction: (node) => node.getData('type')
  }
})

Linechart styling

You can get the barchart to display lines by setting the style key to line

const timelinePlugin = new TimelinePlugin(ogma, container, {
  barchart: {
    graph2dOptions: {
      style: 'line'
    },
  }
})

Then styling of the lines is as follows:

.vis-group{
  fill-opacity: 0;
}
.vis-group.person{
  stroke: #ff9914;
}

Timeline styling

Timeline styling follows the same rules as the other charts, elements get classes depending on their group, and you can use it to stlye them. They also get as a class the nodeId of the node they represent. You can customize the names of the items with the nodeItemGenerator function.

const timelinePlugin = new TimelinePlugin(ogma, container, {
  timeline: {
    nodeGroupIdFunction: (node) => node.getData('type'),
    nodeItemGenerator: (node) => `${node.getData(type)} ${nodeId}`,
    timelineOptions: {
      //here pass more options if you like
    }
  }
})

.timeline-item.car {
  stroke: #ff9914;
  fill: #ff9914;
}
.timeline-item.car.vis-selected {
  stroke: #CCff55;
  fill: #CCff55;
}

To go further into customization, pass options in the timelineOptions key.

Legend

To get the legend on barchart, you can simply pass the legend key

const timelinePlugin = new TimelinePlugin(ogma, container, {
  barchart: {
    graph2dOptions: {
      legend: {left:{position:"bottom-left"}},
    },
  }
})