Highchart: Table with links

td values wrapped with <a> tag. So graph is not showing

by Iqbal Kabir

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>

<div id="chart-cont"></div>

<table id="datatable">
        <tr>
            <th>Colors</th>
            <th>Values</th>
        </tr>
        <tr>
            <th>Blue</th>
            <td><a href="#">40</a></td>
        </tr>
        <tr>
            <th>Black</th>
            <td>30</td>
        </tr>
        <tr>
            <th>Green</th>
            <td>20</td>
        </tr>
</table>

CSS

#chart-cont {
  min-width: 310px;
  height: 400px;
  margin: 0 auto;
}

JavaScript

$(function () {
    $('#chart-cont').highcharts({
        data: {
            table: 'datatable',
        },
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
    });
});