CODEWITHSUNDEEP
javascriptjqueryhighcharts
Guian
Guian

Reputation: 4706

Highchart - Use a formatter on PlotLine labels

I'm using highchart to show some text next to a plot line on the xAxis. I would like to customize each label from a formatter function as it is possible on every other labels in the chart.

I've seen another topic on this matter but they're using TypeScript and I don't.

What I'm doing is :

vay chart = new HighChart({
...
xAxis: {
        plotLines: [{
            id: "plotLines",
            zIndex: 15,
            color: myColor,
            width: 1,
            value: theXvalue, //x value where to show the line
            label: {
                formatter: function () {
                    return " VAL > "+this.value;
               }
            },
        }]
    },
    ...
});

If I set the 'text' value in the label it shows up and it works like a charm.

Any help to use a formatter for those labels ?

Upvotes: 1

Views: 4057

Answers (2)

Padhu
Padhu

Reputation: 1

Set the useHTML value to true and set your html content inside text. Here is an example of how to achieve it http://jsfiddle.net/9mvwpqf3/1/

yAxis: { plotLines: [{ color: 'red', width: 2, value: 100, label: { useHTML: true, text: '<button>Click Me</button>', }, }] },

Upvotes: 0

Sebastian Bochan
Sebastian Bochan

Reputation: 37588

Unfortunately you cannot use formatter, you should define content of label in text object, which can be wrapped in html elements, but then you need to set [useHTML(http://api.highcharts.com/highcharts#xAxis.plotLines.label.useHTML) parameter

Upvotes: 1

Related Questions