score:8
as you already concluded, there isn't a way to configure chart.js out of the box to only show tooltips of specific datasets. however, you can use the plugin interface to create a plugin that can provide this functionality.
here is a plugin that i created for your scenario that let's you configure which datasets you want the tooltip to display for.
chart.plugins.register({
// need to manipulate tooltip visibility before its drawn (but after update)
beforedraw: function(chartinstance, easing) {
// check and see if the plugin is active (its active if the option exists)
if (chartinstance.config.options.tooltips.onlyshowfordatasetindex) {
// get the plugin configuration
var tooltipstodisplay = chartinstance.config.options.tooltips.onlyshowfordatasetindex;
// get the active tooltip (if there is one)
var active = chartinstance.tooltip._active || [];
// only manipulate the tooltip if its just about to be drawn
if (active.length > 0) {
// first check if the tooltip relates to a dataset index we don't want to show
if (tooltipstodisplay.indexof(active[0]._datasetindex) === -1) {
// we don't want to show this tooltip so set it's opacity back to 0
// which causes the tooltip draw method to do nothing
chartinstance.tooltip._model.opacity = 0;
}
}
}
}
});
with the new plugin in place, you can now use a new property in the tooltips
config called onlyshowfordatasetindex
that accepts an array of dataset indexes that the tooltip should display for.
tooltips: {
enabled: true,
mode: 'single',
// new property from our plugin
// configure with an array of datasetindexes that the tooltip should display for
// to get the datasetindex, just use it's position in the dataset [] above in the data property
onlyshowfordatasetindex: [0, 1],
callbacks: {
label: function(tooltipitems, data) {
return data.datasets[tooltipitems.datasetindex].label + ': ' + tooltipitems.ylabel + ' %';
}
}
}
where the index value maps to the position of the dataset in the datasets
property.
take a look at this codepen to see this in action. notice the tooltips only show on the bar charts but not the line (since we did not include this dataset in the new configuration property).
score:1
the only way i was able to get this to work (v3.6.1) was by setting both pointradius
and pointhitradius
to zero. this also removes the points from the graph for that dataset but in my case that was something i wanted as well.
datasets: [ { data: [...], pointradius: 0, pointhitradius: 0, }, ]
score:3
you can use this filter:
tooltips: {
filter: function (tooltipitem, data) {
var datasetlabel = data.datasets[tooltipitem.datasetindex];
var datapointlabel = data.labels[tooltipitem.index];
var datapointvalue = data.datasets[tooltipitem.datasetindex].data[tooltipitem.index];
//you can also use tooltipitem.xlabel or ylabel to get datapoint label and value but here it depends on you chart orientation
if (datasetlabel=="production" && datapointlabel=="red" && datapointvalue<30) {
return false;
} else {
return true;
}
}
}
score:9
in the dataset declaration you can pass a parameter to each of the datasets that determines the hit radius (pointhitradius
) for the hover event. if you set this to 0 it will prevent the tooltip from being launch.
notipdataset = {
label: "no tooltips here",
data: ...,
pointhitradius: 0,
...the rest of your data declaration here
}
ps: this works in chartjs v2.6 but i haven't tested versions further back
score:36
there is now a way to configure charjs to do this; simply use the filter property:
tooltips: {
filter: function (tooltipitem) {
return tooltipitem.datasetindex === 0;
}
}
Source: stackoverflow.com
Related Query
- How to disable a tooltip for a specific dataset in ChartJS
- How to disable a custom tooltip for a dataset in Chart.js line chart?
- how to set color for each item in tooltip with ChartJS
- how to hide specific dataset based on condition chartjs angular
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- Charts JS: Doughnut chart and hiding tooltip for specific data index within each dataset
- Charts.js - How to set custom tooltip text for each dataset
- How to disable chartjs tooltip on mibile devices and small screens?
- How to set specific height for chartJs background color in terms of yAxis value
- React - how to get array from store before first render and use it as dataset for ChartJS
- How to add dataset legend in chartjs tooltip
- How to disable chartjs legendclick
- How to modify chartjs tooltip so i can add customized strings in tooltips
- Chartjs v2 - format tooltip for multiple data sets (bar and line)
- show label in tooltip but not in x axis for chartjs line chart
- How can I hide tooltip in Chart.js on a specific data label?
- How to add label for ChartJs Legend
- ChartJs how to get from mulitiple dateset which dataset bar is clicked
- How to disable Chart JS tooltip when there is no value?
- How to set a full length background color for each bar in chartjs bar
- how to change Y axis value dynamically based on user input in Chartjs for Line chart?
- How to access specific data values from tooltip - Chart.js
- Chart.JS: How to add Data to a specific dataset
- How to change grid line width for one specific line
- Chart.js how to set cutoutPercentages for each dataset
- How to get onClick Event for a Label in ChartJS and React?
- How to get rid of the white square outline or border in the tooltip for chartjs?
- How to dynamically set ChartJs line chart width based on dataset size?
- How to add ChartJS code in Html2Pdf to view image
- How to remove bars for those bars with zero value in Chartjs bar chart?
More Query from same tag
- Chart.js time series showing empty plot
- Javascript chart fills up the entire browser window
- Chart.js configuration
- How to show labels of dataset using chart.js
- Get data from SQLite as an array and generate charts with the data using Chart.js in an HTML
- Passing data to a chart javascript object and array
- Incorrect time chart Chart.js
- How to use Chart.js to draw mixed Financial / Candlestick and Bar Chart?
- Draw Line Chart Using Chart.js
- How to I optimise these javscript options which is used multiple times on different chart.js graphs?
- how to show bar value on the top of each bar in chartjs
- beginAtZero not working on mixed chart
- Hide/show chart.js charts
- Display Doughnut Pie Chart As Circle Progress Chart.js
- Chartjs only showing dots, line not showing
- ChartJs not showing top label
- Re-creating this graph in ChartJS
- generate basic pie chart using chartjs
- chart.js bar chart color change based on value
- Javascript - How to Transform MiB to GB
- Tooltips on multiple charts in chart.js showing the wrong values
- How can I remove the white border from Chart.js pie chart when all legends are hidden?
- Aligning zero on y axis to the labels on x axis of line chart in chartjs
- chart.js radar scaleShowLine for each scaleLine
- How do I display a chart with chart.js?
- How do i find area under the graph
- React input to filter to chart. How convert a hardcoded number into a variable?
- Horizontal gradient for every single bar in group chart js
- Bars on second X Axis not showing
- chart.js dynamically add y axes from json