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');
                            }
                        });






        }

Related Query

More Query from same tag