score:1
Accepted answer
You can not directly access series
array of Vue wrapper for Highcharts. To access internal Highcharts object call getChart
method:
new Vue({
el: "#app",
name: 'chartSample',
components: {
VueHighcharts: VueHighcharts.default
},
data () {
return {
Highcharts: Highcharts,
options: {
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10
},
title: {
text: 'Live random data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: null,
maxZoom: 10 * 1000
},
yAxis: {
title: {
text: 'Value'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2)
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: []
}
}
},
mounted () {
var chart = this.$refs.lineCharts;
setInterval(function () {
var series = chart.getChart().series[0];
if (series != null) {
var x = (new Date()).getTime()
var y = Math.random()
if (series.data.length < 20) {
series.addPoint([x, y], true, false)
} else {
series.addPoint([x, y], true, true)
}
} else {
var a = { name: 'aaa', data: [{x: (new Date()).getTime(), y: Math.random()}] }
chart.addSeries(a)
}
}, 1000)
}
})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue2-highcharts@1.2.4/dist/vue-highcharts.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="app">
<div class="chart-wrapper">
<vue-highcharts :options="options" :Highcharts="Highcharts" ref="lineCharts"></vue-highcharts>
</div>
</div>
Source: stackoverflow.com
Related Query
- Highchart plugin does not work
- x-axis, y-axis lines does not appear, when I include 3D chart library of HighChart in my code
- Highchart Stock gui does not work in Angular 8
- Highchart in js does not work in Vue.js
- SplitSeries does not work in Packed Bubble Highchart in r
- Highchart map does not support IRS country code
- Highcharts code with same set of code/data works in PHP but does not work in JSfiddle
- Highcharts does not work with wicked_pdf
- Highcharts reflow does not work on class selector
- Highchart does not load data from hidden input when using .val
- Why does this highchart plot not render in IE or chrome?
- Tooltip.followPointer does not work in highcharts 3
- Why does my highchart only expand horizontally to fill its containing div, and not vertically?
- setInterval in Angular JS for HighCharts-ng does not work
- Highchart Drill Down do not work for different chart types on same page
- Labels string from Asp.net does not distributed in the highchart
- Generating Highcharts from MySQL data with PHP does not work
- tooltip in highcharts does not work properly
- HighChart marker highlight / tooltip issue, highlight marker does not move
- tool tip does not work correctly if text is more in highcharts
- Function does not work on first render instead the series is generated after the subsequent renders
- Highcharts (highstocks) tooltip does not work on latest firefox 64.0 with useHTML=true
- Multiple axis does not work on Highcharts 4
- Why does my Highchart look different when I transfer my code from Jsfiddle to my server?
- Vue project: object does not support this property or method "hasOwnProperty" IE11
- Highcharts - colorByPoint does not work
- I had follow someone code samples and try apply to my HighChart program but I can't get it work at all
- Highchart does not display unicode character
- highcharts-export-server yAxis formatter does not work
- Synchronized HighCharts does not work when charts have different width
More Query from same tag
- Issue while passing array to setData() function
- How can I force ticks/grid lines on a Highcharts datetime X axis to arbitrarily line up with data points?
- HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefined
- How to get what are the items collapsed in gantt highcharts-angular
- Highstock datetime xAxis, can only show all. no zoom
- Format x-axis of highchart: only showing full numbers
- HighCharts Rendering Issue In Chrome
- R Shiny - Highcharts: Tooltip delay before display
- How to use linear-gradient to column chart in highchart.js
- HighCharts Dynamic multiseries Column Chart showing only 1 set of series at a time
- Error displaying Gantt chart in laravel
- Highcharts: Draw line from marker to axis?
- Shows a single chart on Highcharts
- new link in print menu highcharts
- How to add multiple text on xaxis
- Highcharts chart click event fired on click of the reset zoom button (bug?)
- HighChart Legends Overcome on charts
- highcharts: internet explorer ignores width of my div container
- Adding text dynamically to point popups in highcharts.js
- how can i change position of inputs in high charts high-stock?
- onClick takes two clicks to populate results, HighCharts
- Highcharts : is it possible to make specific plots of a series transparent.
- HighCharts column to pie
- Just how flexible is highcharts? (Mockup attached.)
- Generate pdf that contains hicharts (without rendering an html page)
- Json to Chart using highchart export server with Node js module its throw error
- Display User info from Meteor.users, and display with Highcharts
- highchart: add images to top of chart on every column
- Initializing Highstock.js throws a jQuery error in getComputedStyle
- Updating a point in a line chart when data grouping is in effect