Looking to bootstrap a Highcharts bar chart and dynamically add points to it within a Vue container, the documentation references addPoint(), setData(), and update(). However, I struggled to make any of these methods work.
The provided demo for updating a pie chart using setData() is straightforward:
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: []
}]
});
// button functionality
$('#button').click(function() {
chart.series[0].setData([129.2, 144.0, 176.0]);
});<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Set new data</button>Attempting to reproduce this behavior in a Vue environment proved challenging as the chart fails to update:
var chart = Highcharts.chart('container', {
chart: {
type: 'pie'
},
series: [{
data: []
}]
});
new Vue({
el: "#app",
data: {},
mounted() {
chart.series[0].setData([129.2, 144.0, 176.0]);
chart.redraw()
}
})<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<div id="container" style="height: 400px"></div>
</div>