score:2
Accepted answer
i've had a great time on google with this problem..
basically the way other developers solve your problem was creating a plugin which makes all the tooltips show up after the render
i found a fiddle that fixes this problem..
the fiddle is not mine..
credits goes to suhaib janjua
// show tooltips always even the stats are zero
chart.pluginservice.register({
beforerender: function(chart) {
if (chart.config.options.showalltooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.plugintooltips = [];
chart.config.data.datasets.foreach(function(dataset, i) {
chart.getdatasetmeta(i).data.foreach(function(sector, j) {
chart.plugintooltips.push(new chart.tooltip({
_chart: chart.chart,
_chartinstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterdraw: function(chart, easing) {
if (chart.config.options.showalltooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.alltooltipsonce) {
if (easing !== 1)
return;
chart.alltooltipsonce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
chart.helpers.each(chart.plugintooltips, function(tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
});
// show tooltips always even the stats are zero
var canvas = $('#mycanvas2').get(0).getcontext('2d');
var doughnutchart = new chart(canvas, {
type: 'doughnut',
data: {
labels: [
"success",
"failure"
],
datasets: [{
data: [45, 9],
backgroundcolor: [
"#1abc9c",
"#566573"
],
hoverbackgroundcolor: [
"#148f77",
"#273746"
]
}]
},
options: {
// in options, just use the following line to show all the tooltips
showalltooltips: true
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.3.0/chart.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<canvas id="mycanvas2" width="350" height="296"></canvas>
</div>
score:0
i use onclick event and bootstrap modal for this issue and disabled tooltip.
,onclick: function(c,i) {
e = i[0];
var x_value = this.data.labels[e._index];
var id = x_value;
var type =1;
$.ajax({
url: 'getsearchresults.asmx/chartdetaygetir',
data: "{ 'id': '" + id + "',type:'"+type+"'}",
datatype: "json",
type: "post",
contenttype: "application/json; charset=utf-8",
success: function (data) {
document.getelementbyid("modalheader").innerhtml = x_value;
document.getelementbyid("modalbody").innerhtml = data.d;
$('#mymodal').modal();
},
error: function (response) {
alert(response.responsetext);
},
failure: function (response) {
alert('failure');
}
});
}
Source: stackoverflow.com
Related Query
- How to display Tooltip without hovering pie chart with Chart.JS
- How to display data labels outside in pie chart with lines in ionic
- How to display Line Chart dataset point labels with Chart.js?
- How to display inline values in a stacked bar chart with Chart.js?
- ChartJS - how to display line chart with single element as a line? (not as a dot)
- ChartJS (React) Line Chart - How to show single tooltip with data and labels from 3 (multiple) dataset?
- ChartJS version 3 how to add percentage to pie chart tooltip
- How to display chart using Chartjs with JSON data in Laravel
- how to display multiple sum with chart js and laravel?
- chart.js pie chart - how to update dataset with smooth transition
- How do I display a chart with chart.js?
- how to display name on multi series pie chart in chartjs
- How do I display two datasets on a single chart with chartjs
- Chart.js How to sum the values in a pie chart and display them in the header
- How to display the values inside the pie chart of PrimeNG (chart) using JavaScript or Angular
- How to display labels outside the pie chart border?
- How to display data with percentage from database in pie chartjs?
- How to create a chart-js pie chart with PHP data variables?
- How to display label inside pie chart in Chartkick?
- How to display icon arc of doughnut chart with primeVue
- How do I make a pie chart showing number of people in an age group with JSON and ChartJS?
- How to open a new Tab with javascript and display some chart
- Laravel - How to Display both count and percentage (%) in chartjs pie chart
- C# MVC5 JavaScript Chart.js Pie Chart with Realtime Updating from SQL Server Database without Refreshing
- How to make the size of pie chart fixed without using canvas (chart.js)
- How to add a coloured legend box to a pie chart with Chart.js v1?
- How to display pie slice data and tooltip together using chart.js
- How can I create a horizontal scrolling Chart.js line chart with a locked y axis?
- Chartjs random colors for each part of pie chart with data dynamically from database
- ChartJS New Lines '\n' in X axis Labels or Displaying More Information Around Chart or Tooltip with ChartJS V2
More Query from same tag
- How to style a pie chart in chart js? I want to change the border color, border width and give them shadow
- Vue.js this.$el.getContext('2d') is not a function
- How to make chart which has both positive and negative value, starts with 0 - x axis
- Creating Chart.js using API data in react
- Transparentize some bars of dataset in ChartJS
- How to print angular-chart
- Does the min value of the xAxes have to be within the dataset
- Add some Text Inside of the Tooltip
- updating a chart in chart.JS using a dropdown button
- How to Integrating Chart.js with Angular 7 with Data from database
- problems with ChartJS refresh in angular component
- Linear x axis for bar chart chartjs
- How can I update my ChartJS in real time (It's works only when I zoom-in and zoom-out)
- ChartJS v2.6.0 unintended behaviour in Internet Explorer
- ChartJS unique datasets per label
- Chart JS: Donut/Doughnut Chart: Tooltip to be shown always for all the data. All tooltip is not shown when multiple data are with 0 data
- Send data from a form to another component of the same level -angular
- Remove specific label
- How to rewrite JavaScript currency formatting to abbreviate dollar amount
- How can I change the position of legends in chart.js?
- How can I add multiple datasets into my dropdown menu and keep it as dynamic as it is right now?
- Why do Bar Pie Chart values not line up?
- Stacked bar chart with chartjs with included values
- X-axis multiple colored label for bar chart using chart.js
- React using fetch returns undefined until save
- Chartjs 3.x Migration Guide notes on animation not working
- How to make Chart.js with dynamic months on x-axis
- How to set X coordinate for each bar with react chart js 2?
- Changing the Y axis unit in Chartjs
- Char.js - How to show labels by default in pie chart