score:1
You may to call chart.js update() method asynchronously instead. You may want to use a recursion also if the label should depend on which data point hovered by user.
window.myLine = new Chart(chart, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
enabled: true,
mode: 'single',
callbacks: {
label: asyncTooltipLabel
}
},
}
});
function asyncTooltipLabel(tooltipItems, data) {
// some asynchronous function call
setTimeout(function() {
// when asyncronous result comes
const result = (tooltipItems[0].index * 2) + ' €';
const newTooltipConfig = {
enabled: true,
mode: 'single',
callbacks: {
label: function(newTooltipItems, newData) {
if (newTooltipItems[0].index === tooltipItems[0].index && newTooltipItems[0].datasetIndex === tooltipItems[0].datasetIndex) return result;
else asyncTooltipLabel(newTooltipItems, newData);
}
}
}
// apply new tooltip config
window.myLine.options.tooltips = newTooltipConfig;
window.myLine.update();
}, 2000);
}
Source: stackoverflow.com
Related Query
- Load Chart.js tooltip information asynchronously
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- Load Tooltip faster during onHover of Legend Doughnut chart
- Chart tooltip should show the consolidated information of a single bar in double bar chart
- Chart.js - How to set a line chart dataset as disabled on load
- How to remove square label from tooltip and make its information in one line?
- Chart JS custom tooltip option?
- chart.js scatter chart - displaying label specific to point in tooltip
- show label in tooltip but not in x axis for chartjs line chart
- Chart.js doughnut chart tooltip size?
- ChartJS add tooltip to a grouped bar chart
- Chart JS Show HTML in Tooltip
- chart js tooltip how to control the data that show
- Chart js v2 tooltip callback line breaks
- How to disable Chart JS tooltip when there is no value?
- Chart.js tooltip hover customization for mixed chart
- Add all data in the tooltip of Chart JS
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- Charts.js tooltip overlapping text on chart
- ChartJS: Show all labels of a mixed chart in the tooltip
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- Chart.js Chart in Angular does not load until resizing browser window
- Chart JS custom tooltip not showing
- Chartjs - Insert additional data into chart tooltip
- Fail to load chart on Flask/jinja2 html using chart.js
- Add a text as tooltip for each point on a line chart
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Chart.js tooltip at any point on the chart
- Tooltip flickering when hovered on chart
- ChartJS version 3 how to add percentage to pie chart tooltip
More Query from same tag
- Querying mongoDB for some chart data - my pipeline seems convoluted
- angular-chart.js, how to change colours labels
- Fill Chart.js bar chart with diagonal stripes or other patterns
- Add watermark/logo to Chart.js
- How to custom legend with react-chartjs-2
- Element occurrences AngularJs Chart.js
- Ionic using multiple chart.js canvas in the same page
- ChartJs events in Angular
- Chart.js only draws when I go through debug on Chrome
- How can I show texts only if they fit in the arc in Chart.Js 2.8.0?
- How to display icon arc of doughnut chart with primeVue
- How do I get a chart.js chart to display data in a Node/React web application?
- colors are not updated when updating chart
- How to convert Data table to Json in Javascript
- Chart.js - How to create an auto-scaling line diagram for a big amount of data happenning over time
- laravel query builder with conditions
- Load more historical data in Line charts on panning left
- ChartJS dynamically adding values with jQuery array
- how to use chart.js in angular 7
- How To Format Scale Numbers in Chart.js v2
- How to install vue-chartkick and use it in my components?
- bind first property value of an array of object into chart.js
- How to call a typescript arrow function and a javascript function in the same event
- Add Labels to Chart.js Bar Chart
- “lazy-initialize” In ChartJS
- Tooltip background color gets faded angular-chart.js
- Customize ChartJS Hover Data Format
- Is it possible to have tick stepSize for each dataset in Chart.js?
- ChartJS version 3 how to add percentage to pie chart tooltip
- make chartJS labels clickable and get label details