Angular2 ng2-chart customizations?
<p>I have started to use angular2 <code>ng2-chart</code>. I have few questions regarding the below image which I created using angular2 ng2-chart but still want to do more customization: </p>

<p><a href="https://i.stack.imgur.com/FXzqE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FXzqE.png" alt="Sample Chart"></a></p>

<p>Questions:</p>

<p>1) How can I draw a dotted-line between two points when there are no values like in above image Nov-7 has value 0 (zero)?</p>

<p>2) How can I make a shadow effect, opacity or a combination of more than one colors?</p>

<p>3) How can I get the value of y-axis when I hover on any of the defined point and also if I want to change the y-axis grid color on mouse hover. What is the best way to do it using ng2-chart hover function?</p>

<p>Current sample code and config file:</p>

<p>index.html</p>

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

<p>index.component.ts</p>

<pre><code>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 = (&lt;any&gt;Config.get('test')).charts;
    console.log(this.charts);
  }

  chartHovered(e:any):void {
    console.log(e);
  }
}
</code></pre>

<p>Config.ts:</p>

<pre><code>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)'
      }]
    }
  }
});
</code></pre>