title: Using KendoUI Charts, How do you make the Legend item a hyperlink?
body: <p>I'm using KendoUI and I have created the following Chart. I need to be able to make the Legend item "Product 1" in this case a hyper link. How Do I do that?</p>
  
  <p><img src="https://i.imgur.com/MTN1N.gif" alt="" /></p>
  
  <p>My Markup:</p>
  
  <pre><code>&lt;div id='chart' &gt;&lt;/div&gt;​
  </code></pre>
  
  <p>My Script:</p>
  
  <pre><code> jQuery('#chart').kendoChart({
  seriesDefaults: {
      type: "line",
      missingValues: "interpolate"
  },
  legend: {
      position: "bottom"
  },
  valueAxis: [{
      title: {
          text: "Score"
      },
      min: 75,
      max: 90,
      },
  {
      name: "hidden",
      visible: false,
      min: 75,
      max: 90},
  {
      name: "ProductSurveys",
      min: 15,
      max: 55,
      title: {
          text: "Survey Count"
      },
      color: "#4c4c4c"}],
  series: [{
      type: "line",
      name: "&lt;a href='http://jsfiddle.net/rodneyhickman/wCB5a/' &gt;Product 1&lt;/a&gt;",
      color: "#004990",
      width: 1,
      markers: {
          background: "#004990"
      },
      tooltip: {
          visible: true,
          template: "&lt;b&gt;Product 1&lt;/b&gt;&lt;br/&gt;Current Score: #= value #&lt;br/&gt;#= category # "
      },
      data: [87.11, 87.27, 87.21, 86.84, 85.47, 84.87, 84.52, 85.19, 85.19, 85.2, 84.68, 83.78, 82.14]},
  {
      type: "line",
      name: "Market Segment Average",
      color: "#da7633",
      width: 1,
      markers: {
          background: "#da7633"
      },
      tooltip: {
          visible: true,
          template: "&lt;b&gt;Market Segment Average&lt;/b&gt;&lt;br/&gt;Current Score: #= value #&lt;br/&gt;#= category # "
      },
      data: [77.73, 77.27, 77.22, 76.68, 76.19, 75.7, 75.86, 76.09, 76.33, 76.15, 75.75, 75.4, 75.9]},
  {
      type: "column",
      data: [50, 48, 48, 46, 46, 48, 49, 46, 39, 37, 36, 34, 27],
      name: "Survey Count",
      color: "#e9eafe",
      axis: "ProductSurveys"}],
  categoryAxis: {
      labels: {
          rotation: -45,
          step: 1,
          skip: 0
      },
      categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"],
      axisCrossingValue: [0, 0, 100, 100]
  }
  </code></pre>
  
  <p>});​</p>
  
  <p>This is the jsFiddle Project of my failed attempt: <a href="http://jsfiddle.net/wCB5a/1/" rel="nofollow noreferrer">http://jsfiddle.net/wCB5a/1/</a></p>
  
  <p>Any Help would be appreciated. </p>