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
- charts js, doughnut chart not rendering tooptips correctly
- React & Chartjs: How can I best destroy my chart when re-rendering?
- Trying to get _index of clicked bar in ChartJS
- Javascript chart one number step
- Change color of Polar Area datasets in Angular
- Horizontal line syncing across multiple charts when hovering with Chart.js in Typescript-react
- Remove the label and show only value in tooltips of a bar chart
- How to update chart.js on websocket event?
- Convert date label on Y-axis Line Chart to specific date format
- ChartJS update chart with multiple datasets
- Update Chart.js data with ajax
- how to change default font family in react-chartjs-2
- ChartJs: remove line between two points
- How to sum/divide array values in chart.js?
- Wrong display of xAxes in Chartjs
- ChartJS "half donut" chart not displaying properly
- The dataset in ng2 charts for bar graph is not setting properly
- How to add an array to my line data?
- Dynamically Creating Json Array Javascript
- Vue Chart.js -- can I give a line chart a default value for missing data?
- With Chart js, I am trying to color every 7th vertical (x axis) grid line (representing each week beginning visually)
- ChartJS xAxis time formats don't change for days
- How do we put labels on pie chart arcs - chart.js/vue-chart.js
- Chartjs how to show scale label horizontally
- How To Match Left and Right Tick Intervals with Chartjs
- How to convert chart.js library chart to image in pure node.js without using HTML and CSS?
- Style individual points from one dataset in Chart.js
- How to target only X or Y value in jsonObj array
- Chart.js place y value position and its x-label position relative to the x-value
- Looking for JS chart library with interactive diagrams