Adding Hyperlinks in Tooltip - CanvasJS

Adding Hyperlinks in Tooltip - CanvasJS

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

CSS

.canvasjs-chart-tooltip{
    pointer-events: auto !important;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
      title: {
       	 text: "Hyperlinks in ToolTip"
      },
      axisY: {
        	title: "Views"
      },
      axisX: {
        	title: "Pages"
      },
      data: [
      {
        type: "column",
        toolTipContent: "<a href = {name} target='_blank'> {label}</a><hr/>Views: {y}",
        dataPoints: [
          { y: 84, label: "home", name: "https://canvasjs.com" },
          {  y: 36, label: "download", name: "https://canvasjs.com/download-html5-charting-graphing-library/" },
          {  y: 19, label: "blog", name: "https://canvasjs.com/blog/" },
          {  y: 45, label: "gallery", name: "https://canvasjs.com/html5-javascript-column-chart/" }
        ]
      } 
      ]
  });

  chart.render();