Highcharts not rendering labels from an html table

Question

In HighCharts - how do you get the labels and popup labels to reference the first column of an HTML table:

I have added to this fiddle: http://jsfiddle.net/XJ9ck/3/ - the pie chart renders, with the correct numbers, but it's just the labels that are not working. I suspect it's something here:

dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#000000',
                format: '<b>{point.name}</b>: {point.percentage:.1f} %'
            }

Thanks for any help,

Mark

My code is:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<table id="datatable2">
<thead>
    <tr>
        <th>Num</th>
        <th>Status Reason</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Client Action Required</td>
        <td>64</td>
    </tr>
    <tr>
        <td>Future Enhancement</td>
        <td>8</td>
    </tr>
    <tr>
        <td>Client Hold</td>
        <td>3</td>
    </tr>
    <tr>
        <td>Monitoring</td>
        <td>11</td>
    </tr>
</tbody>
</table>

<div id="container" style="min-width: 400px; height: 500px; margin: 0 auto"></div>

My Javascript is:

    $(function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable2')
        },
        chart: {
            type: 'pie'
        },
        title: {
            text: 'Queue by Person and Status'
        },

        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        }

        , plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
            }
        }
    });
});

Anil Anil · Accepted Answer · 2013-06-26T16:09:03

To fix you names issue, Generate the data array in javascript and then create the highchart.

Check the following JSFiddle, It works how you expect and uses your table.

It builds the data array in javascript dynamically, and then generates the chart.

View Working JSFiddle!

I added the legend on line 58 of the Javascript, remove the line if you don't want it, (You can also click on the legend names to add/remove them from the chart).

I would also suggest checking out the Highcharts Docs: http://api.highcharts.com/highstock
It's very well documented and has everything you would require if you run into any issues.

Also, you can remove the 'highcharts.com' by adding the following to the top of your page.

// By default.. ALL charts should not show the credits (if you want)
Highcharts.setOptions({credits: {enabled: false}});

:)

Highcharts not rendering labels from an html table

1 Answers