Highstock Angular value in legend - highcharts

Question

I'm looking for alternatives for the plug In values in legend.
The plug in uses jQuery and I'm running a Angular 5 application.
Has someone created a solution for that before?
labelFormat: '<span style="color:{color}">{name}</span>: <b>{point.y:.2f} USD</b> ({point.change:.2f}%)<br/>'
Here is a sample of Hicharts using jQuery to access the chart container and display the series value on legend.

Answer 1

To get rid of jquery you can replace jquery .bind method with js addEventListener on chart.container. Next, follow highcharts-angular documentation and create your own wrapper for this plugin. Check demo posted below.
Value-in-legend.js plugin:
(function(factory) {
if (typeof module === "object" && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
})(function(Highcharts) {
Highcharts.Series.prototype.point = {}; // The active point
Highcharts.Chart.prototype.callbacks.push(function(chart) {
chart.container.addEventListener("mousemove", function() {
var legendOptions = chart.legend.options,
hoverPoints = chart.hoverPoints;
// Return when legend is disabled (#4)
if (legendOptions.enabled === false) {
return;
}
if (!hoverPoints && chart.hoverPoint) {
hoverPoints = [chart.hoverPoint];
}
if (hoverPoints) {
Highcharts.each(hoverPoints, function(point) {
point.series.point = point;
});
Highcharts.each(chart.legend.allItems, function(item) {
item.legendItem.attr({
text: legendOptions.labelFormat
? Highcharts.format(legendOptions.labelFormat, item)
: legendOptions.labelFormatter.call(item)
});
});
chart.legend.render();
}
});
});
// Hide the tooltip but allow the crosshair
Highcharts.Tooltip.prototype.defaultFormatter = function() {
return false;
};
});
Next, initialize it in your component:
require("./path-to-your-file/value-in-legend")(Highcharts);
Demo:
https://codesandbox.io/s/j2j7wxwv7y