I'm trying to optimize my chart using ng2-charts on Angular cli app. In general, everything works just fine, the only thing does not is the line on hover to track the data point. This is the ideal chart model I try to make and I also tried to follow its code:
https://stackblitz.com/edit/line-chart?file=app%2Fapp.component.ts
However, when I hover on my chart, only the tooltip is shown.
Here are my codes:
plugin-hoverline.ts: (copy & paste from the link below, credit by @GRUNT)
https://istack.000webhostapp.com/chartjs-plugin-hoverline.js
banner.component.ts: (chart component)
import { Component, OnInit } from '@angular/core';
import { HistoricalBpiService } from '../../services/historical-bpi.service';
import './plugin-hoverline';
@Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss']
})
export class BannerComponent implements OnInit {
currentDate:string = new Date().toJSON().slice(0,10).replace(/-/g,'-');
private dataUrl: string = 'historical/close.json?start=2013-09-01&end=' + this.currentDate;
constructor(
private historicalBpiService:HistoricalBpiService
) {}
// lineChart
public lineChartData:any = [
{ data:[], label: 'BTC' }
];
public lineChartLabels:Array<any> = [];
public lineChartOptions:any = {
responsive: true,
maintainAspectRatio: false,
layout: {
padding: 0
},
lineOnHover: {
enabled: true,
lineColor: '#bbb',
lineWidth: 1
},
scales: {
yAxes: [{
display: false,
scaleLabel: {
display: false,
labelString: 'USD'
},
ticks: {
//min: 0,
//max: 5000,
stepSize: 500,
display: false,
mirror: true,
labelOffset: 7,
padding: -10,
callback: function(value, index, values) {
return '$' + value;
}
},
gridLines: {
display: true,
tickMarkLength: 0
}
}],
xAxes: [{
ticks: {
display: false,
mirror: true
},
gridLines: {
display: false,
tickMarkLength: 0
}
}]
},
elements: {
point: {
radius: 0
},
line: {
tension: 0, // 0 disables bezier curves
}
},
hover: {
mode: 'nearest',
intersect: false
},
tooltips: {
mode: 'nearest',
intersect: false,
backgroundColor: 'rgb(95,22,21)',
callbacks: {
title: function (tooltipItems, data) {
return (tooltipItems[0] || {})['xLabel'];
},
label: function (tooltipItem, data) {
return '$ ' + tooltipItem.yLabel.toLocaleString();
},
labelColor: function(tooltipItem, chart) {
let dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
}
}
};
public lineChartColors:Array<any> = [
{
backgroundColor: 'rgba(199,32,48,0.9',
borderColor: 'rgb(95,22,21);',
pointBackgroundColor: 'rgba(218,208,163,0.9)',
pointHoverBackgroundColor: 'rgba(218,208,163,0.9)',
pointHoverBorderColor: 'rgb(218,208,163)',
pointHoverRadius: 5,
steppedLine: false
}
];
public lineChartLegend:boolean = false;
public lineChartType:string = 'line';
// events
public chartClicked(e:any):void {
console.log(e);
}
public chartHovered(e:any):void {
console.log(e);
}
ngOnInit(){
this.historicalBpiService.getBpiData(this.dataUrl)
.subscribe(
res => {
//this.lineChartData = Object.keys(res.bpi).map(function (key) { return res.bpi[key];});
this.lineChartData[0].data = Object.values(res.bpi);
this.lineChartLabels = Object.keys(res.bpi);
//console.log(this.lineChartData,this.lineChartLabels);
}
)
}
}
Template:
<div class="chart">
<canvas baseChart height="360px"
[datasets]="lineChartData"
[labels]="lineChartLabels"
[options]="lineChartOptions"
[colors]="lineChartColors"
[legend]="lineChartLegend"
[chartType]="lineChartType"
(chartHover)="chartHovered($event)"
(chartClick)="chartClicked($event)"></canvas>
</div>
