Highchart - Custom Images for Labels by using html

Question

I have a highchart barchart and try to display some custom images as label in each of the bars. I try it by configuring plotOptions like this:

plotOptions: {
        column: {
            grouping: false,
            borderWidth: 0,
            groupPadding: 0,
            dataLabels: {
                enabled: true,
                useHtml: true,
                formatter: function () {
                    var score = '<img src="../Images/Icon_VPP_5Punkte" alt="5 Punkte" >';
                    if (this.color === "#e30613") score = '<img src="../Images/Icon_VPP_1Punkt" alt="1 Punkt">Test';
                    if (this.color === "#ed8c05") score = '<img src="../Images/Icon_VPP_3Punkte" alt="3 Punkte" >';
                    console.log(score);
                    return score;
                },
                inside: 'center',
                color: 'black',
                shadow: false,
                style: {
                    textOutline: "0px contrast"
                }
            }
        }

    }

As you can see I set useHtml to "true" and set some custom formatter function like recommend here: Highchart Doc

But no image will be shown. JS Fiddle

Can anyone help me with this?

Answer 1

You have "useHtml" instead of "useHTML" in your code ;)

useHTML: true,

JS Fiddle