score:1
Accepted answer
you can set the intersect
property to false to always get the tooltip without needing to intersect the bar exactly:
var options = {
type: 'bar',
data: {
labels: ["red", "blue", "yellow", "green", "purple", "orange"],
datasets: [{
label: '# of votes',
data: [12, 19, 3, 5, 2, 3],
borderwidth: 1
}]
},
options: {
plugins: {
tooltip: {
intersect: false
}
}
}
}
var ctx = document.getelementbyid('chartjscontainer').getcontext('2d');
new chart(ctx, options);
<body>
<canvas id="chartjscontainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/3.5.0/chart.js"></script>
</body>
score:0
you can make your own tooltip by editing the callbacks, i had to get the nearest values around my cursor, from all datasets, on my line chart. this works for me on chartjs 2.9.3:
tooltips: {
mode: "x",
position: "nearest",
intersect: false,
callbacks: {
beforebody: function(tooltipitems, alldata) {
let x = tooltipitems[0].x; // get x coordinate
let datasets = alldata.datasets; // datasets
let values = [];
for (i in datasets) {
let dataset = datasets[i];
let meta = this._chart.getdatasetmeta(i); // dataset metadata
let xscale = this._chart.scales[meta.xaxisid]; // dataset's x axis
let xvalue = xscale.getvalueforpixel(x); // we get the x value on the x axis with x coordinate
let data = dataset.data // data
// search data for the first value with a bigger x value
let index = data.findindex(function(o) {
return o.x >= xvalue;
});
let value = data[index]; // this is our nearest value
// format label
if (isnan(value.ymax)) {
values.push(`${dataset.label}: ${value.y}\n`);
} else {
values.push(`${dataset.label}: ${value.y}, min: ${value.ymin}, max: ${value.ymax}\n`)
}
}
return values.join(""); // return label
},
label: function() { // this needs to be empty
},
}
},
Source: stackoverflow.com
Related Query
- chartjs: bars smaller than actual column, tooltip doesn't display
- How can I display different values on xAxes than on tooltip Chart.js V3
- How to set max smaller than min in ChartJS
- ChartJS - Moving vertical line is display on top of tooltip
- Always show last tooltip on all datasets, leave the rest to display on hover? ChartJS
- ChartJS doesnt display labels provided by Jinja variable
- How do I display a different chartjs tooltip title?
- chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip
- how to display bars in chartjs
- Display Chartjs tooltip values outside the canvas - multi line chart
- ChartJS display tooltip at maximum/minimum value
- ChartJS - Display a single line data in tooltip
- How to sort color segments by value within the 100% stacked bars rather than by value across all the stacked bars in Highcharts or ChartJs
- JavaScript Chart.js - Custom data formatting to display on tooltip
- Chartjs Tooltip Line Breaks
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
- How to disable a tooltip for a specific dataset in ChartJS
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- Display line chart with connected dots using chartJS
- chartjs tooltip is cut off when out of canvas
- show label in tooltip but not in x axis for chartjs line chart
- ChartJS display legend
- ChartJS Line Graph - Multiple Lines, Show one Value on Tooltip
- ChartJS add tooltip to a grouped bar chart
- ChartJs custom tooltip position
- ChartJS - Set different hover-text than x-axis description
- Display values outside of pie chart in chartjs
- ChartJS with AngularJS - Canvas won't display anything
- ChartJs bar chart - keep bars left instead of equally spread across the width
More Query from same tag
- Vertical stacked bar chart with chart.js
- Secondary bar with chart.js
- Equal distance grouped bar chart irrespective of scale - chart.js
- Get X, Y onClick chart coordinates in ChartJS
- Cannot resize chart from chart.js
- Not sure how to rerender chart in the app
- How do i have to implement my code to get correct json?
- ChartJS date reformatting for use?
- Custom data position on the doughnut chart in chart.js
- How to style specific gridlines differently in chartJs?
- Boxplot chartjs make min and max dynamic by leaving some space on both side
- Horizontal floating bars with a time y-axis in Chart.js
- Using and reading a variable from Knockout.js in Chart.js
- how to creat a dynamic datasets and new dynamic multi yAxes
- ChartJs different data for Tooltips
- Chartjs fiddle not working
- How to get rid of axis lines in ChartJS?
- Changing the base of the logarithmic scale in Chart.js
- How to add background color for doughnut mid using chart,js
- Creating dynamic object to reorganize API response using Typescript
- Chart.js multiTooltip Labels in Pie
- Can I arrange labels of legend in Doughnut chart one by one?
- Angular protractor tests timeout on pages containing Chart.js
- Error in compilation for chart.js Expected method shorthand in object literal ('{label() {...}}'
- highlightFill for radar charts in chartJS
- Overlap chart datasets with different view types in Chart.js
- Set max value for each label with Chart.js
- How to use HTML in custom tooltip in angular charts?
- I can't display the vue-chart.js on the page
- Chart.js V2: Add prefix or suffix to tooltip label