Use Hyperlinks in Axes Labels

It is possible to use hyperlinks in the axes labels of a Kendo UI Chart.

The example below demonstrates how to achieve this behavior.

Example

    <div id="chart"></div>
    <script>
      var data = [ {
        "blog": "My blog",
        "day": "1",
        "value": 3,
        "userColor": "#ffd600",
        "url": "http://www.example.com"
      }, {
        "blog": "My blog",
        "day": "2",
        "value": 7,
        "userColor": "#ffd600",
        "url": "http://www.example.com"
      }, {
        "blog": "My blog",
        "day": "3",
        "value": 12,
        "userColor": "#ffd600",
        "url": "http://www.example.com"
      }];

      $("#chart").kendoChart({
        dataSource: {
          data: data
        },
        title: {
          align: "left",
          text: "Comments per day"
        },
        legend: {
          visible: false
        },
        seriesDefaults: {
          type: "column"
        },
        series: [{
          field: "value",
          colorField: "userColor"
        }],
        valueAxis: {
          majorGridLines: {
            visible: false
          },
          visible: false
        },
        categoryAxis: {
          field: "day",
          majorGridLines: {
            visible: false
          },
          line: {
            visible: false
          },
          labels: {
            color: "#0487c4",
            cursor: "pointer",
            padding: {
              top: 2,
              bottom: 2,
              left: 3,
              right: 3
            },
            border: {
              width: 1,
              color: "#0487c4"
            }
          }
        },
        axisLabelClick: function(e) {
          window.location = e.dataItem.url;
        }
      });
    </script>

See Also

• Chart JavaScript API Reference
• Drawing API
• How to Aggregate Data in Pie Charts
• How to Draw on Scatter Plots Surface
• How to Expand Clickable Area of Points
• How to Fit PDF Exported Chart to Page
• How to Handle Right Click in Charts
• How to Place Text in the Center of Donut Charts
• How to Render Custom Plot Bands
• How to Set Different Marker Types for Grouped Line Charts
• How to Use Linear Gradient As Background in Bars

For more runnable examples on Kendo UI Charts, browse the How To documentation folder.