title: Angular2 ng2-chart customizations?
body: <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>