I have a HighCharts bar chart that is updated with data from an ajax call as shown below.
var updateChart = function() {
$.ajax({
url: "/theurl/theid",
type: "Get",
success: function(data) {
chart.xAxis[0].setCategories(data.SomeText);
chart.series[0].setData(data.SomeData, true);
chart.series[1].setData(data.OtherData, true);
}
});
};
The construction of the chart is outlined in the code block below
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart(
{
chart: {
type: 'bar',
renderTo: 'container',
height: 750
}, ... (additional options removed for brevity),
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{y} %',
style: {
fontWeight: 'bold',
color: '#3b3b3b',
fontSize: '125%'
},
useHTML: true
}
},
bar: {
dataLabels: {
enabled: true
},
}
},
... (additional options removed for brevity)
);
});
The intention is to dynamically update the data displayed on the chart every 10 seconds without refreshing the entire page.
The data appears and the chart is rendered only when the updateChart() function is executed in the console. Upon first execution of updateChart(), everything displays correctly. However, upon subsequent executions (without reloading the page), all components are visible except for the dataLabels which should show percentages (100%, 55%, etc.)
If I remove the useHTML = true option from the plotOptions.Series.DataLabels, the percentages are once again visible but it leads to other styling problems that I had resolved using this same option.
Is there a solution to maintain useHTML set to true while preventing the disappearance of dataLabels during updates?