Estoy tratando de crear una vista de línea de tiempo usandovisjs de un escenario de actualización (Pre Upgrade, Pre Release y Post Upgrade) algo similar a la imagen a continuación. Necesita algunos punteros para crear diferentes colores de región como se muestra en la imagen, CSS para cambiar el marcador principal a una fuente de imagen y también al pasar el cursor deslizante (región o marcadores) debería mostrar alguna descripción.

CSS

.vis-item.vis-background.preupgrade {
  background-color: rgba(0, 153, 255, 0.2);
}

.vis-item.vis-background.prerelease {
  background-color: rgba(102, 204, 255, 0.2);
}

.vis-item.vis-background.postupgrade {
  background-color: rgba(204, 204, 255, 0.2);
}

Controlador

$scope.visData = new vis.DataSet([
  {start: '2015-07-26', end: '2015-08-25', type: 'background', title: 'Pre Upgrade', className: 'preupgrade'},
  {start: '2015-08-26', end: '2015-09-30', type: 'background', title: 'Pre Release', className: 'prerelease'},
  {start: '2015-10-01', end: '2015-10-31', type: 'background', title: 'Post Upgrade', className: 'postupgrade'}
]);
  $scope.visOption = {
    editable: false,
    autoResize: true,
    moveable: true,
    margin: {
        item: 10,
        axis: 20
    }
};

HTML de la línea de tiempo de Visjs

<vis-timeline data="visData" options="visOption" events="visEvent"></vis-timeline> 

También estoy proporcionando unenlace plunker por este problema

Actualizar Además, ¿por qué mi plunker no muestra cambios de color en la región?

Actualizado enlace plunker con algunos cambios de CSS, pero ¿cómo agregar información sobre herramientas en la parte superior de las áreas de fondo y cómo agregar marcadores personalizados como se muestra en la imagen con información sobre herramientas?

Actualizar

Ahora he logrado la mayoría de las cosas usando AngularJS y jQuery simultáneamente, pero necesito ayuda para convertir todo a AngularJS. Aún está pendiente agregar un tiempo personalizado y hacer clic en evento.

Enlace actualizado de Plunker