I've seen the HighCharts Docs, and have also read this answer, but I don't know how to add HTML to the labels. I am trying to create a donut chart with the sum of the values in the middle.

For some reason, this works (Example A):

var text = this.name + '<br>' + this.y ;
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

But this does not (Example B):

var text = '<div><h2>' + this.name + '</h2><p>' + this.y + '</p></div>';
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

I've tried setting useHTML to true:

var chartOptions = {
    chart: { ... },
    labels: {
        useHTML: true,
    }
    ...
}

But to no avail. Also, the reason Example A "works" is that it's creating multiple <tspan> elements. Here's the inspect-element on the result from Example A:

<tspan>Pie 2</tspan>
<tspan>100</tspan>

I'd really prefer to get this to use HTML if possible, since that's just easier to style for me, but I also need this to be part of the chart, since I need it to interact and change with the chart.

EDIT:

Here's the fiddle. Click on any of the pie slices to see the effect I'm trying to achieve.

I've seen the HighCharts Docs, and have also read this answer, but I don't know how to add HTML to the labels. I am trying to create a donut chart with the sum of the values in the middle.

For some reason, this works (Example A):

var text = this.name + '<br>' + this.y ;
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

But this does not (Example B):

var text = '<div><h2>' + this.name + '</h2><p>' + this.y + '</p></div>';
var chart = this.series.chart;
if (!chart.lbl) {
    chart.lbl = chart.renderer.label(text, 140, 110)
        .css({
            fontSize: '22pt',
            textAlign: 'center'
        })
        .add();
} else {
    chart.lbl.attr({
        text: text
    });
}

I've tried setting useHTML to true:

var chartOptions = {
    chart: { ... },
    labels: {
        useHTML: true,
    }
    ...
}

But to no avail. Also, the reason Example A "works" is that it's creating multiple <tspan> elements. Here's the inspect-element on the result from Example A:

<tspan>Pie 2</tspan>
<tspan>100</tspan>

I'd really prefer to get this to use HTML if possible, since that's just easier to style for me, but I also need this to be part of the chart, since I need it to interact and change with the chart.

EDIT:

Here's the fiddle. Click on any of the pie slices to see the effect I'm trying to achieve.

• javascript
• highcharts

• JSFiddle to play around with would be helpful. – Halvor Holsten Strand Commented Mar 10, 2015 at 19:14
• Please make sure you use the correct properties. useHtml is wrong. The correct one is useHTML. Please see: api.highcharts./… – Roco CTZ Commented Mar 11, 2015 at 0:14
• @Ondkloss added the JSFiddle link. @RocoCTZ the useHtml was a typo on my part, but using useHTML did not change anything. See fiddle. – jperezov Commented Mar 11, 2015 at 12:20

1 Answer 1

Always, when using some inner methods from Highcharts, read how to use them, from the source code:

 label: function (str, x, y, shape, anchorX, anchorY, useHTML, baseline, className)

As you can see label() method has more options, not just only text/x/y ;)

Working example for you: http://jsfiddle/Q6yQs/57/ , where useHTML is set to true.