¿Personalizaciones angulares2 ng2-chart?

Empecé a usar angular2 ng2-chart . Tengo algunas preguntas con respecto a la image de abajo que creé usando angular2 ng2-chart pero aún quiero hacer más personalización:

Gráfico de muestra

Preguntas:

1) ¿Cómo puedo dibujar una línea punteada entre dos puntos cuando no hay valores como en la image de arriba Nov-7 tiene valor 0 (cero)?

2) ¿Cómo puedo hacer un efecto de sombra, opacidad o una combinación de más de un color?

3) ¿Cómo puedo get el valor del eje y cuando me desploop sobre cualquiera de los puntos definidos y también si deseo cambiar el color de la cuadrícula del eje y al desplazar el mouse sobre él? ¿Cuál es la mejor manera de hacerlo usando la function ng2-chart hover?

Código de muestra actual y file de configuration:

index.html

 <div class="container"> <div class="row"> <div class="overview-page"> <div class="overview-page-title"> <h2>Overview</h2> </div> <div class="chart-view"> <canvas baseChart class="chart" [datasets]="charts.datasets" [labels]="charts.labels" [colors]="charts.chartColors" [options]="charts.options" [legend]="false" [chartType]="charts.type" (chartHover)="chartHovenetworking($event)"> </canvas> </div> </div> </div> </div> 

index.component.ts

 import {Component, Output, EventEmitter, OnInit} from '@angular/core'; import {Router} from '@angular/router'; import {Config} from '../../../config/config'; @Component({ templateUrl: 'index.html', styleUrls: ['../../../../common/stylesheets/pages/index.scss'] }) export class IndexComponent implements OnInit { protected charts: any; ngOnInit() { this.charts = (<any>Config.get('test')).charts; console.log(this.charts); } chartHovenetworking(e:any):void { console.log(e); } } 

Config.ts:

 import * as Immutable from 'immutable'; export const Config = Immutable.Map({ test: { charts: { datasets: [{ data: [40, 48.2, 0, 52.6, 51.1, 57.6, 74.8] }], labels: ['Nov 5', 'Nov 6', 'Nov 7', 'Nov 8', 'Nov 9', 'Nov 10', 'Nov 11'], type: 'line', options: { scales: { xAxes: [{ gridLines: { color: 'rgba(171,171,171,1)', lineWidth: 1 } }], yAxes: [{ ticks: { beginAtZero: true, max: 100, min: 0, stepSize: 25 }, gridLines: { color: 'rgba(171,171,171,1)', lineWidth: 0.5 } }] }, responsive: true }, chartColors: [{ backgroundColor: 'rgba(25,10,24,0.2)', borderColor: 'rgba(225,10,24,0.2)', pointBackgroundColor: 'rgba(225,10,24,0.2)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(225,10,24,0.2)' }] } } }); 

No pude encontrar la mejor respuesta a tu primera pregunta. Sin embargo, puede definir sets de datos múltiples sin intersección y usar diferentes colors (vea el punto 2) para ese.

http://valor-software.com/ng2-charts/

Para el segundo, cuando defines colors, como ya lo estás haciendo en tu código:

 chartColors: [{ backgroundColor: 'rgba(25,10,24,0.2)', borderColor: 'rgba(225,10,24,0.2)', pointBackgroundColor: 'rgba(225,10,24,0.2)', pointBorderColor: '#fff', pointHoverBackgroundColor: '#fff', pointHoverBorderColor: 'rgba(225,10,24,0.2)' } 

El último número en rgba es la opacidad. Para tener diferentes colors, la opción es definir sets de datos múltiples, de lo contrario, aleatoriza los colors y no se mezclarán. Un plunker aquí:

http://plnkr.co/edit/9PckMZiDYZjRz1PA0Suq

Para la última pregunta sobre cómo get el valor del eje X, observe el evento que se registra en la console en events acotados.