score:1

Accepted answer

try using the following code :

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', pointhoverradius: 5, steppedline: false }
   ];

   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: true
      },
      tooltips: {
         mode: 'nearest',
         intersect: true,
         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)'

      }
   ];
   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);
         }
         )
   }
}

you should set the pointhoverradius property inside linechartdata array instead of linechartcolors, also set the intersect property to true for both hover and tooltips


Related Query

More Query from same tag