I am new to HighCharts and implementing highcharts in angular application. I am trying to use piechart and below is the code
chartOptions= {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
colors: pieColors,
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %',
distance: -50,
filter: {
property: 'percentage',
operator: '>',
value: 4
}
}
}
},
series: [{
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Internet Explorer', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Safari', y: 4.18 },
{ name: 'Other', y: 7.05 }
]
}]
});
Here I want to update series data(for example name: "Edge") through loop when calling specific function. So how can I achieve this. Can anyone please help me here
CodePudding user response:
@csk Here you can use update
function for updating series data.
In HTML file
<button onclick="update()">AddOneChart</button>
In Ts file
const chartOptions = {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares at a specific website, 2014'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
accessibility: {
point: {
valueSuffix: '%'
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b><br>{point.percentage:.1f} %'
}
}
},
series: [{
name: 'Share',
data: [
{ name: 'Chrome', y: 61.41 },
{ name: 'Internet Explorer', y: 11.84 },
{ name: 'Firefox', y: 10.85 },
{ name: 'Safari', y: 4.18 },
{ name: 'Other', y: 7.05 }
]
}]
};
const charts = Highcharts.chart('container', chartOptions);
const update = function update() {
chartOptions.series[0].data.push({
name: 'Test',
y: 10.85
});
charts.update(chartOptions, true);
};
Reference: https://jsfiddle.net/cmk72dpe/
CodePudding user response:
I don't understand what you mean by "add on loop" but here is a way to add single data point and then update the chart after.
In TS
handleUpdate() {
this.chartOptions.title = { text: 'updated' };
this.chartOptions?.series[0]?.data.push({ name: 'Edge', y: 4.67 });
this.updateFlag = true;
}
In html
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions"
[(update)]="updateFlag">
</highcharts-chart>```