ZingChart: Can I click on a pie chart node and open a URL?

To accomplish the drilldown feature using our API you will need to leverage the API event listeners like node_click. For a pie chart you could also use plot_click but the code in the event listener would look exactly the same. You will listen for the event and based on the plotindex you will re-direct the user to the location of your choice.

zingchart.node_click = function(e) {
  switch(e.plotindex) {
    case 4:
      window.open('https://www.opera.com/', '_blank');
    case 3:
      window.open('https://www.apple.com/safari/', '_blank');
    case 2:
      window.open('https://www.mozilla.org', '_blank');
    case 1:
      window.open('https://www.google.com/chrome/', '_blank');
      window.open('https://www.microsoft.com/en-us/download/internet-explorer.aspx', '_blank');

Example: https://demos.zingchart.com/view/F0M2OWRZ

Another way you could accomplish clicking on a node and re-directing to a url is using built in ZingChart attributes. In side of plot or each individual series object you would define a url and a target attribute. The %data-band is a custom token in ZingChart and is referencing the array defined above it.

"series" : [
    "values" : [15, 21, 16, 14, 18, 21, 9],
    "data-band" : ["Genesis", "Rush", "Pink Floyd", "King Crimson", "The Moody Blues", "Yes", "Emerson, Lake and Palmer"],
    "url" : "http://www.google.com/#q=%data-band",
    "target" : "_blank",

Example: https://demos.zingchart.com/view/FKTA3T4S


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us