[Chartjs]-Chartjs โ€“ Donut Chart label for small values not visible

3๐Ÿ‘

โœ…

You could draw the legend for the pie chart by calling generateLegend on the created chart and add an event listen to highlight the segment when hovered over in the legend

$(function() {
  var pieChartCanvas = $("#pieChart").get(0).getContext("2d");

  var PieData = [{
    value: 70000,
    color: "#f56954",
    highlight: "#f56954",
    label: "Chrome"
  }, {
    value: 6000,
    color: "#00a65a",
    highlight: "#00a65a",
    label: "IE"
  }, {
    value: 4000,
    color: "#f39c12",
    highlight: "#f39c12",
    label: "FireFox"
  }, {
    value: 4000,
    color: "#00c0ef",
    highlight: "#00c0ef",
    label: "Safari"
  }, {
    value: 3000,
    color: "#3c8dbc",
    highlight: "#3c8dbc",
    label: "Opera"
  }, {
    value: 10,
    color: "#d2d6de",
    highlight: "#d2d6de",
    label: "Navigator"
  }];
  var pieOptions = {
    segmentShowStroke: true,
    segmentStrokeColor: "#fff",
    segmentStrokeWidth: 2,
    percentageInnerCutout: 50,
    animationSteps: 100,
    animationEasing: "easeOutBounce",
    animateRotate: true,
    animateScale: false,
    responsive: true,
    maintainAspectRatio: true
  };
  var pieChart = new Chart(pieChartCanvas).Doughnut(PieData, pieOptions);

  var helpers = Chart.helpers;
  var legendHolder = document.getElementById('graph-legend');
  legendHolder.innerHTML = pieChart.generateLegend();

  // Include a html legend template after the module doughnut itself
  helpers.each(legendHolder.firstChild.childNodes, function(legendNode, index) {
    helpers.addEvent(legendNode, 'mouseover', function() {
      var activeSegment = pieChart.segments[index];
      activeSegment.save();
      pieChart.showTooltip([activeSegment]);
      activeSegment.restore();
    });
  });
  helpers.addEvent(legendHolder.firstChild, 'mouseout', function() {
    pieChart.draw();
  });

  document.getElementById('graph-legend').appendChild(legendHolder.firstChild);

});
.box-body,
#graph-legend {
  width: 50%;
  float: left
}
#graph-legend ul {
  list-style: none;
}
#graph-legend ul li {
  display: block;
  padding-left: 30px;
  position: relative;
  margin-bottom: 4px;
  border-radius: 5px;
  padding: 2px 8px 2px 28px;
  font-size: 14px;
  cursor: default;
  -webkit-transition: background-color 200ms ease-in-out;
  -moz-transition: background-color 200ms ease-in-out;
  -o-transition: background-color 200ms ease-in-out;
  transition: background-color 200ms ease-in-out;
}
#graph-legend li span {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 100%;
  border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<div class="box-body">
  <canvas id="pieChart" width="787" height="300"></canvas>
</div>
<div id="graph-legend"></div>

Leave a comment