Reputation: 4706
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
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
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