score:0
Accepted answer
here is how you define the custom tooltip function:
chart.defaults.global.customtooltips = function (tooltip) {}
this fires anytime a tooltip would fire. (note that tooltips do not identify hovering over an individual datapoint. instead, they return the entire vertical series.)
the tooltips
object, contains these properties for each hovered (vertical) series:
- title: x-axis label (vertical) e.g. "march"
- labels: all data points (vertical) e.g. [29,86]
further, it is possible to access the dataset for the hovered series like this:
- datasets[0]: first series (horizontal) e.g. [65, 59, 80, 81, 56, 55, 40]
- data.datasets[1].label: label for 2nd horizontal data series
below is an example that extracts this data as you move the mouse:
html:
<div class="panel panel-success">
<div id="rpt"></div>
<div class="panel-heading">
<div id="i">
change purple series:
<input id="ii" type="text" value="99"/>
<button id="ib">update</button>
</div>
<h3 class="panel-title">panel title</h3>
</div>
<div class="panel-body">
<canvas id="mychart" width="600" height="400"></canvas>
</div>
</div>
javascript/jquery:
//update 2nd datapoint, purple series
$('#ib').click(function(){
tmp = $('#ii').val();
mylinechart.datasets[0].points[2].value = tmp;
mylinechart.update();
$('#ii').val( ~~(math.random() * 80) + 20 ); //gen new number
});
//custom tooltip function - try uncommenting various alerts
chart.defaults.global.customtooltips = function (tooltip) {
if (tooltip.y){
tt = tooltip.title;
ll = tooltip.labels;
no = tooltip.labels.length;
rpt = 'title: ' +tt+ ' - data: ';
for (i=0;i<no;i++){
// alert( data.datasets[i].strokecolor );
// alert( data.datasets.length );
// alert( data.datasets[i].label );
// alert( tooltip.labels[i] );
rpt += data.datasets[i].label +': '+ ll[i] +'; ';
}
alert(rpt);
//alert('title: ' +tt+ ' - data: ' +ll );
//alert( json.stringify(tooltip) );
//$('#rpt').html( json.stringify(tooltip) );
}
}
//chart data
var data = {
labels: ["january", "february", "march", "april", "may", "june", "july"],
datasets: [{
label: "purple cows",
fillcolor: "rgba(220,20,20,0.2)",
strokecolor: "purple",
pointcolor: "rgba(220,220,220,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
}, {
label: "red heifers",
fillcolor: "rgba(151,187,205,0.9)",
strokecolor: "red",
pointcolor: "rgba(151,187,205,1)",
pointstrokecolor: "#fff",
pointhighlightfill: "#fff",
pointhighlightstroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}]
};
//chart options
var options = {
animation: false,
scaleoverride: true,
scalesteps: 3,
scalestepwidth: 30,
scalestartvalue: 10,
responsive: true,
maintainaspectratio: false,
scaleshowgridlines : true,
scalegridlinecolor : "rgba(0,0,0,.05)",
scalegridlinewidth : 1,
scaleshowhorizontallines: true,
scaleshowverticallines: true,
beziercurve : false,
beziercurvetension : 0.4,
pointdot : true,
pointdotradius : 3,
pointdotstrokewidth : 1,
pointhitdetectionradius : 20,
datasetstroke : true,
datasetstrokewidth : 2,
datasetfill : false
}
//create the chart, based on above data
var ctx = $("#mychart").get(0).getcontext("2d");
var mylinechart = new chart(ctx).line(data, options);
sources:
Source: stackoverflow.com
Related Query
- charts.js - custom event using tooltip data (line chart)
- How to add an on click event to my Line chart using Chart.js
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Using chart js version 3, how to add custom data to external tooltip?
- Add data to line chart using chart.js
- nnnick chart.js - Custom Tooltip on Line Chart
- Adding data to line chart using addData() method in Chart.js
- Line Chart using Chart js with time data
- Real-time line chart with ChartJS using Ajax data
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Custom Tooltips On Line Chart Using Chart.js
- Trying to create a custom tooltip in a doughnut chart using chartsjs, but it is not working
- data in charts of charts.js is changing when I click in the line chart
- How to edit my custom tooltips in my line chart using chart.js?
- Line chart plotting multiple points for duplicate data on x and y axis using chart.js
- Create a line chart using an user input table from a data table in chart.js
- Using custom dataformat in chart.js for Multi Axis Line Chart
- Plot a Line chart using Chart.js with CSV Data
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Chart Js Change Label orientation on x-Axis for Line Charts
- Moving vertical line when hovering over the chart using chart.js
- create a multi line chart using Chart.js
- Chart JS custom tooltip option?
- line chart with {x, y} point data displays only 2 values
- Display line chart with connected dots using chartJS
- How to save Chart JS charts as image without black background using blobs and filesaver?
- show label in tooltip but not in x axis for chartjs line chart
- chart js tooltip how to control the data that show
- Chart js v2 tooltip callback line breaks
- Display a limited number of labels only on X-Axis of Line Chart using Chart.js
More Query from same tag
- How can I change color of only one column in Barchart using Chart.js
- How to give break line in data label
- js devexpress PieChart Series color runtime
- Creating charts dynamically using ChartJS and AngularJS
- Loop to create lines for graph chartjs
- Chartjs change the specific label color in x axis in callback function
- I want to hide the label in a tooltip because it shows undefined
- Chart js show/hide legend during runtime via buttonClick
- Skip labels when associated value is null in chartJS
- How to show values on top of bars in a PDF using chart.js and chartjs-node-canvas?
- ChartJS using AJAX call to retrieve data isn't rendering visualization
- Add DataSet Bar Chart - Chart.JS
- Chartkick column_chart different colors not working
- Created an onclick function to remove data from a line chart in ChartsJs, but getting "Cannot read property 'data' of undefined" error
- Why is my line graph going backwards in chartjs?
- Charts.js polar area scales
- ChartJS changing displayed data based on date?
- Chart.js 2.2.1 - Chart doesn't render correctly before resizing
- Insert value into a ChartJS with different data label
- Unable to make y-axis to begin at zero on Charts.js v2.1.4
- SAPUI5 using chart.js
- Only first value added gets displayed in ng2-chart linechart
- Make chartjs pie chart wiyh dynamic data
- How populate chart.js with sql data?
- Charts.js : How to remove the Vertical Black lines in Bar Chart
- Chartjs Graph is not showing in colorbox
- ChartJS - Time graph from JSON
- Creating a Normal Distribution graph with Chart.js
- Rounded corners on chartJS v.2 - bar charts (with negative values)
- Chart js not showing negative y axis