I have implemented highchart for graph rendering and utilized the renderer to draw a custom line within the chart. I am looking for a way to recalculate and repaint this path whenever there is a change in data. The framework being used is highcharts-ng along with Angular. Below is the code snippet:-
{
options: {
chart: {
type: 'line',
marginTop: 80,
style: {
fontFamily: 'serif',
fontSize:14
},
events:{
redraw:function(e){
console.log(e)
var elem=e.target.renderer.Element()
console.log(elem)
console.log('I am Reloaded')
}
}
//backgroundColor:'rgba(255, 255, 255, 0.1)'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
animation: false,
marker: {
symbol: 'circle'
},
lineWidth: 1,
events: {
afterAnimate: function () {
console.log('lol')
}
}
}
},
colors: ['#2C91DE', '#165A8E'],
},
tooltip: {
style: {
padding: 10,
fontWeight: 'bold'
}
},
title: {
text: ""
},
loading: false,
series: [],
func: (chart) => {
this.$timeout(() => {
console.log(chart)
var ren = chart.renderer;
var group = ren.g().add();
var attrForVLine = {
'stroke-width': 3,
stroke: '#2C91DE',
dashstyle: 'solid'
};
for (var i = 0; i < chart.series[0].data.length; i++) {
var plot1 = chart.series[0].data[i];
var plot2 = chart.series[1].data[i];
/**
* Creating line segments across the graphs.
* Keeping the ZIndex low for these lines.
*/
ren.path([
'M',
plot1.plotX + chart.plotLeft,
plot1.plotY + chart.plotTop,
'V',
plot2.plotY + chart.plotTop
]).attr(attrForVLine).add();
}
}, 1000);
},
yAxis: {
tickInterval: 40,
title: {
text: ''
}
},
xAxis: {
startOnTick: true,
endOnTick: true,
lineColor: '#000000',
type: 'datetime',
labels: {
rotation: -60,
format: '{value:%m-%d-%Y}',
align: 'right'
}
}
};
Even though the chart renders correctly initially with the vertical lines, they do not update when the data changes. I am seeking assistance on how to dynamically update the rendered SVG elements. Your help is appreciated. Thank you.
The below chart showcases vertical lines drawn by the renderer https://i.sstatic.net/y6eR5.png
Upon changing the data, the lines drawn by the renderer do not get removed but remain static even though the graph repaints with new data points as demonstrated below https://i.sstatic.net/lfrS3.png
I would like to clear and redraw these lines dynamically.