Link on Legend- CanvasJS
Link on Legend
by canvasjs
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer",
{
theme:"theme3",
title:{
text: "Link on Legend",
},
legend:{
cursor: "pointer",
itemclick:function(e){
window.open(e.dataSeries.legendLink,"_blank");
// change _blank with "_parent", "_self", "_top"
}
},
toolTip:{
shared:true
},
data: [
{
type: "stackedBar100",
name: "Chrome",
showInLegend: true,
//legendText:"Chrome",
legendLink:"http://www.google.com/chrome/",
//indexLabel: "Chrome",
dataPoints: [
{ label: "2010", y : 22.4},
{ label: "2011", y: 34.6},
{ label: "2012", y: 46.9},
{ label: "2013", y: 55.8},
{ label: "2014", y: 61.6},
{ label: "2015", y: 68}
]},{
type: "stackedBar100",
name: "Firefox",
//legendText:"Firefox",
showInLegend: true,
legendLink:"http://www.mozilla.org/en-US/firefox/new/",
//indexLabel: "Firefox",
dataPoints: [
{ label: "2010", y: 43.5},
{ label: "2011", y: 37.7},
{ label: "2012", y: 31.1},
{ label: "2013", y: 26.8},
{ label: "2014", y: 23.6},
{ label: "2015", y: 19.1}
]},{
type: "stackedBar100",
name: "Opera",
showInLegend: true,
//legendText:"Opera",
legendLink:"http://www.opera.com/",
//indexLabel: "Opera",
dataPoints: [
{ label: "2010", y: 2.2},
{ label: "2011", y: 2.5},
{ label: "2012", y: 2.1},
{ label: "2013", y: 1.9},
{ label: "2014", y: 1.6},
{ label: "2015", y: 1.5}
]},{
type: "stackedBar100",
name: "Safari",
showInLegend: true,
//legendText:"Safari",
legendLink:"http://www.apple.com/safari/",
//indexLabel: "Safari",
dataPoints: [
...