chart.js – link to other page when click on specific section in chart

by

You can use getElementAtEvent() method to detect which section/slice of your pie chart was clicked on, and based on that open a link/page accordingly.

Here is a quick example :

var canvasP = document.getElementById("pieChart");
var ctxP = canvasP.getContext('2d');
var myPieChart = new Chart(ctxP, {
   type: 'pie',
   data: {
      labels: ["Värde 1", "Värde 2", "Värde 3", "Värde 4", "Värde 5", "Värde 6", "Värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"],
         hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      }
   }
});

canvasP.onclick = function(e) {
   var slice = myPieChart.getElementAtEvent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'Värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'Värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="pieChart"></canvas>

More Related Contents:

  1. Linking to a specific part of a web page
  2. URL to compose a message in Gmail (with full Gmail interface and specified to, bcc, subject, etc.)
  3. Change clickable TextView’s color on focus and click?
  4. Scrapy: Follow link to get additional Item data?
  5. HTML anchor tag with Javascript onclick event
  6. How to extract the hyper links from a webpage in javascript
  7. onclick or inline script isn’t working in extension
  8. How to call multiple JavaScript functions in onclick event?
  9. How to add click event to a iframe with JQuery
  10. Onclick event getting called automatically
  11. How to click or tap on a TextView text
  12. file download link in rails
  13. Add hyperlink to textblock WPF
  14. How to put rounded corners on a Chart.js Bar chart
  15. Create blog post links similar to a folder structure
  16. Make a hyperlink textview in android
  17. Links in TextView
  18. onClick not triggered on LinearLayout with child
  19. Clicking HyperLinks in a RichTextBox without holding down CTRL – WPF
  20. Switch displayed traces via plotly dropdown menu
  21. Limit labels number on Chart.js line chart
  22. Prevent onclick action with jQuery
  23. Android: textview hyperlink
  24. Chart.js v2: How to make tooltips always appear on pie chart?
  25. how to extract links and titles from a .html page?
  26. The right way of setting when it’s a local file
  27. Extract links from a web page
  28. CSS – style a link based on its “rel” attribute?
  29. ng2-charts update labels and data
  30. Function not calling within an onclick event

Leave a Comment