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
Source: stackoverflow.com
Related Query
- Chartjs / ng2-charts line on hover does not work
- chartjs plugin datalabels does not show value on charts
- Chartjs and ChartDataLabels does not work in mdb5 pro version 2
- Chartjs backgroundColor for line chart does not appear in Vue app
- Python list does not work in django with ChartJS
- Ng2 charts - Animation doesn't work on line chart onInit
- Chartjs disable legend click does not work when condition is not evaluated
- Angular ChartJs does not show Data for multiple Charts
- ChartJS does not work on Windows 10 - in any browser
- ChartJS Line Charts - remove color underneath lines
- show label in tooltip but not in x axis for chartjs line chart
- chartjs show dot point on hover over line chart
- chartjs + Angular6 is not showing charts or any error
- chartjs height does not follow parent container
- Angular-chart.js - Make line chart does not curve
- How to render a vertical line on hover in chartjs
- ChartJs line chart - display permanent icon above some data points with text on hover
- ChartJS vertical line not removed on touchend
- How do I make line charts overlay over bar charts in chartjs
- ChartJS charts not generating within tabs
- Chart.js click event to open a custom tooltip does not work sometimes
- annotation line not visible in scatter chart in chartjs
- Chartjs bar-chart does not render when values are equal
- Bar Chart of ChartJS does not Render
- Setting up min and max in chartjs did not work
- Chartjs not working with d3 from csv source
- Generate multiple line charts in Django with ChartJS
- ChartJS Version 3 - common legend for multiple line charts
- Do not draw line on condition in ChartJS line chart
- Bootstrap modal not working with chartjs line graph
More Query from same tag
- Plotting Dashed Vertical and Horizontal lines on line graph for single point
- charts.js stacked y-Axis
- Create a chartjs pie chart using json data
- polymer, using attribute data binding in the constructor functions
- Unregister plugin in Chart.js
- How to remove paddings in Bar chart? (Chart.JS)
- How to custom index label on each bar chart using chartjs?
- How i can insert string data to diagrams in chart.js
- Chart.JS: How to make sharp lines to smooth curved lines
- chart.js Line chart with different background colors for each section
- Chart JS not working with Dynamic Data
- Moving vertical line when hovering over the chart using chart.js in v2.9.4
- ChartJs title not showing
- How to read and plot json with Chart.js
- Vue3 does not show line-chart
- Chart js loading screen
- 404 Not Found Error when trying to display a chart with Chart.js
- e.labels.map is not a function when creating a chart with chart.js
- Are we able to position the y axis in the center of the x axis?
- Moving HTML with jQuery makes chart.js charts dissapear, no errors, unknown reason How can I redraw it?
- How to Change the Label Strike-Through with light gray on a ChartJS Doughnut?
- How to detect click on chart js 3.7.1 axis label?
- getElementById on element from parent component returns null, when called in ngAfterViewInit() of child component
- Can't get event from chartjs-annotation-plugin on mouseenter
- Change value from 0 to something on tooltip only
- Chartjs unexpected visual animation effect when adding data
- Overlap chart datasets with different view types in Chart.js
- Chart Js update legend boxes of graph with graph line style
- chart.js - Axis lables
- Chart.js tooltips callback function with pie charts