Custom CSS style
Each element of the timeline can be customized with CSS.
/* Color event in blue */
.event {
fill: #4249ae;
}
/* Hover event in green */
.event:hover {
fill: #5d8;
}
/* Reference lines (pivots and today line) as a red stroke */
.reference-line {
stroke: #ee7d79;
shape-rendering: crispEdges;
stroke-dasharray: 6.7;
stroke-linecap: round;
}
/* Change pivots opacity on drag */
.pivot-group.draggable {
opacity: 0.6;
}
/* Show an arrow cursor to show that pivots are draggable */
.pivot-group:hover {
cursor: col-resize;
}
/* Color axis in grey, 4px width */
.axis--x .domain {
stroke: #e4e4e4;
stroke-width: 4;
stroke-linecap: round;
}
/* Change the opacity of text (tick and clusters) */
.tick text, .event-group text {
opacity: .6;
}
/* Center each tick and color them in light grey */
.tick line {
transform: translateY(-10px);
stroke: rgba(180, 180, 180, .5);
stroke-linecap: round;
}