score:1
better approach is to customize tooltip template to show no data :
tooltiptemplate: "<%if (label && value){%><%=label%>: <%= value %><%} else {%> no data <%}%>"
score:2
i wanted to disable the tooltip all times. the version i'm using is 2.1.6, and i did it like this:
var options = {
tooltips : {
enabled: false
}
};
note: this will not display tool-tip at all, use it only when you want to disable the tool-tip appearing.
score:3
if you don't mind a few console messages you can throw
an error to exit out of the tooltip method for null
values, like so
var mylinechart = new chart(ctx).line(data, {
tooltiptemplate: function (d) {
if (d.value === null)
throw '';
else
// else return the normal tooltip text
return d.label + ': ' + d.value;
}
});
the alternative would be to extend the chart or write a custom tooltips function
fiddle - http://jsfiddle.net/y4zunrx6/
score:3
using chart.js 2.3.0 and angular-chart.js 1.1.1, i solved the problem globally by resolving the chartjsprovider
provider in my angular.module('shared').config(...)
function and specifying a custom label
callback for the tooltips
option:
chartjsprovider.setoptions({
tooltips: {
enabled: true,
//mode: 'single',
callbacks: {
label: function (tooltipitem, data) {
const tooltip = data.datasets[tooltipitem.datasetindex];
const value = tooltip.data[tooltipitem.index];
return value === 0 ? null : tooltip.label + ': ' + value;
}
}
}
});
by returning null the tooltip is not shown for that specific tooltipitem.
reference: chart.js tooltip configuration
Source: stackoverflow.com
Related Query
- How to disable Chart JS tooltip when there is no value?
- How to sort XY line chart tooltip items based on value and add thousands separators?
- How to show tooltip value of all data falling on the same axis in chart js?
- how to disable last/max value shown on x axis in chart js?
- How to show tooltip only when data available in chart js?
- How to use dates as X axis with Chart.js even when there is no Y axis value related
- How can I show "No Data" message in Pie Chart when there is no data using VueJS?
- How to limit chart JS hover to take only one value from each line chart when zoomed out?
- How to disable a tooltip for a specific dataset in ChartJS
- chart js tooltip how to control the data that show
- How to display value of only one datapoint in line chart
- ng2-charts customize data and whole html content of tooltip displayed when hovering on bar chart
- How to create single value Doughnut or Pie chart using Chart.js?
- How to detect when Tooltip closes in chart.js?
- Drawing line chart in chart.js placing dots only when value changes
- Chart.js line chart tooltip shows wrong label when line doesn't start at first label
- How to disable canvas elements from hijacking mouse wheel when scrolling through a page?
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- Angular chart how to show the legend data value by default along with legend name
- Tooltip flickering when hovered on chart
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to hide value in Chart JS bar
- How to access or get value of specific graph on chart plot by click event?
- ChartJS v2 - Keep tooltip open when user click on a point of a multiple lines chart
- How to disable Chart.js Radar Chart point labels
- How to use segment property to color line / border color based on value in chart js?
- How to add null value rows into pandas dataframe for missing years in a multi-line chart plot
- How could I skip drawing empty/zero value and its value on tooltip
- Chart.Js how to hide datapoints with "0" value in Stacked Bar Chart
- How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js
More Query from same tag
- Chart.js is not Dynamically Updating when the firebase databse is updating. (Vue.js)
- How to display data on hover inside doughnut chart in Angular Chart?
- chart.js? Specifically Radar Charta and Negative Numbers
- How to always show line chart tooltip in ionic-angular.?
- Javascript : ""Uncaught TypeError: Cannot read property 'x' of undefined"" in canvasjs.min.js
- chart.data.datasets.push() also adds datasets to other charts in array
- Chart.js showing time (HH:MM:SS - 24 hour clock) on xAxis
- Chart js. How to align text by the center of the tooltip?
- Remove 0% from pie chart
- ChartJS automatically scaled chart has undefined min and max
- ChartJS stacked bar chart not displaying as stacked
- How to modify chartjs tooltip to add customized attribute
- How to show data from views on chartjs in django?
- Why my ChartJs only Coloring one section?
- Referencing locally declared variable into an array for data for chartjs
- How do I refresh data from json-file with charts.js?
- Hide/disable tootlip on specific graph values
- How do I keep chart.js charts in one JS file, and not get errors when the ID from the JS file don't exist on one specific html page?
- Force ChartJS to show Doughnut chart with null values
- chart.js with json data and jquery - error :-(
- Plotting Dashed Vertical and Horizontal lines on line graph for single point
- ./~/chartjs-plugin-zoom/dist/chartjs-plugin-zoom.esm.js Module not found: Can't resolve 'chart.js/helpers'
- Not all date data shows on x axis line chart
- Multipe doughnut charts on one page with text in center using Chart.js
- Uncaught TypeError: Cannot read property 'offsetWidth' of undefined - chart.js
- change white cell border color in chart.js
- Height for chart area (not the canvas size)?
- Chart.js multiTooltip labels
- chartJS Horizontal Bar - Hide Stacked Bars But Still Show In Tooltip
- how to change size of point in ChartJS