Angular2 ng2 chart settings?

Question

I started using angular2 ng2-chart . I have a few questions regarding the image below, which I created using angular2 ng2-chart, but still want to make more settings:

Questions:

1) How can I draw a dashed line between two points when there are no values, as in the figure above Nov-7 has a value of 0 (zero)?

2) How to make the effect of shadow, opacity or a combination of more than one color?

3) How can I get the value of the Y axis when I hover over any of the defined points, and also if I want to change the grid color of the Y axis when I hover over the mouse. What is the best way to do this using the ng2 charting function?

Current sample code and configuration file:

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)="chartHovered($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); } chartHovered(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)' }] } } }); 

Answer 1

I could not find a better answer to your first question. However, you can define multiple datasets without intersecting and use different colors (see Clause 2) for this.

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

For the second, when you define colors, as you already do this in your code:

 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)' } 

The last number in rgba is opacity. For different colors, the option is to define multiple data sets, otherwise they will randomize the colors and you will not get mixed ones. The plunker is here:

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

In the last question about getting the x-axis value, view the event that is logged in the console for limited events.