In this tutorial, I will show you how to use Highcharts Vue wrapper to generate interactive web charts. Since the best way to learn is by doing, I will walk you through the demo app included in the repository; the result is displayed in this GIF below:
Remark
The following technologies/tools are used in the demo: NodeJS, Vue, Vue-CLI, and Webpack. Basic knowledge of Javascript and ES6 are recommended to follow along.
The article is divided into two main sections. The first section is about setting up the environment, and the second is about how to use the wrapper itself.
Let’s get started.
The environment setting
A bundler (Webpack), a transpiler (babeljs), and a loader (vue-loader) are used to build the environment. The description of those tools is beyond the scope of this article. All you need to know right now is that Vue-cli does all the heavy lifting configurations for you, such as the webpack configuration, the application skeleton, etc.
To set up the environment, create a new directory and navigate to it (using the terminal), then install Vue-cli using this command: npm install -g vue-cli
.
Then type the following command to run a new vue project vue init webpack-simple
Enter the directory created by cd yourFolder
. Run the following commands to install Highcharts and Highcharts Vue wrapper:
npm install --save highcharts
npm install highcharts-vue
Once the installation has finished, you will see that configuration files have been automatically added to your directory, such as index.html, App.vue, main.js, etc. Cool, right?
That is it; the environment setup is complete :).
How to use the wrapper
Let’s try out the wrapper! Open the main.js file and add the following code:
import Vue from 'vue' import HighchartsVue from 'highcharts-vue'
Then, register the wrapper on the global scope using Vue.use: vue.use<(HighchartsVue)
The demo displays three different charts: a spline chart, a stock chart, and a map chart. For better visibility and maintenance, let’s create a component for each chart. Enter to the src directory and create a new directory called components. Add three empty files: Chart.vue, MapChart.vue, and StockChart.vue.
Each file has three sections: template element, script element, and a style element.
Template
After the wrapper has been registered, you can use the Highcharts-vue component by adding the custom tag into the components.
The constructor-type attribute is set by default for chart, so no need to add it. However, the constructor-type attribute is required for the stock and maps charts:
:constructor-type="'mapChart'" :constructor-type="'stockChart'"
Script
The script element is where the chart’s options and data are stored:
data() { return { title: '', points: [10, 0, 8, 2, 6, 4, 5, 5], chartType: 'Spline', seriesColor: '#6fcd98', colorInputIsSupported: null, chartOptions: { chart: { type: 'spline' }, title: { text: 'Sin chart' }, series: [{ data: [10, 0, 8, 2, 6, 4, 5, 5], color: '#6fcd98' }] } } },
Don’t forget to wrap those options and data into a component object to use it later: Export default { … }
Style
There is nothing specific about the style element, as it is mainly CSS. It’s worth mentioning that this element makes use of the <style scoped> attribute, which limits the scope of the style to that component only. You can copy the content of the three components files from this GitHub link.
Next, import those components into the App.vue file:
import Chart from './components/Chart.vue' import StockChart from './components/StockChart' import MapChart from './components/MapChart' .... components: { chart: Chart, stockChart: StockChart, mapChart: MapChart },
For the rest of the code, feel free to copy the code from this GitHub link.
Before running the demo, install the packages with the command: npm install
Launch the demo: npm run build
That’s it. Go and create your own charts with Highcharts-vue wrapper!
Comments
vmanusa | 6 years ago
I am pulling my data from a REST API and the number of series is unknown at runtime – how do I do update the chart series at runtime?
Jeremy Hutchcraft | 6 years ago
I am working through the same issues.. did you find any way to make it work with this wrapper? I am about to abandon the wrapper and try without it.
Zween | 6 years ago
To consume API use the mounted lifecycle hook.
Like this :
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
//here do your request to get data from your API
//e.i with axios => https://www.npmjs.com/package/axios
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
SpinoWeb | 4 years ago
Hello, I am trying to plot a series like this to draw a polygon: [{ x : 100, y: 100, id: ‘1’}, { x : 200, y: 100, id: ‘2’}, { x : 200, y: 200, id: ‘3’}, { x : 100, y: 200, id: ‘4’}, { x : 100, y: 100, id: ‘5’}]
but using the vue-wrapper the chart is blank. It can be “fault” of the vue-wrapper?
Mustapha Mekhatria | 4 years ago
Hi,
The chart type polygon requires the library highcharts-more
All you have to do is to add:
import more from 'highcharts/highcharts-more';
inmain.js
,then add
chart: {type: 'polygon'},
inchart.vue
Pushan | 3 years ago
Two questions
1. How to switch theme on the fly via Vue?
2. How to use sparkline chart with vue?
Mustapha Mekhatria | 3 years ago
You can switch theme by merging theme options with chart options and update a chart (set new chartOptions in Vue)
There is not yet a sparkline chart in Vue (it is not a Highcharts series). However, it can be achieved as any other chart in Vue (sparkline is just an example of how to set many charts in a table with different data)
Romeo Tulagan | 2 years ago
Hi Highchart team,
Is it possible to add a show table on highchart vue wrapper?
Like on this URL https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/export-data/showtable/
Mustapha Mekhatria | 2 years ago
Hi,
Yes, you can. All you have to do is to add the right modules
import Highcharts from “highcharts”;
import exportingInit from “highcharts/modules/exporting”;
import exportData from “highcharts/modules/export-data”;
exportingInit(Highcharts);
exportData(Highcharts);
Here a demo https://codesandbox.io/s/highcharts-vue-demo-forked-vcgwi0?file=/src/App.vue
Read more: https://api.highcharts.com/highcharts/exporting.showTable
Romeo Tulagan | 1 year ago
Hi,
It is possible to show the table on the bottom of the column graph?
Mustapha Mekhatria | 1 year ago
Hi,
Yes, it is possible. To do so you will need to import export-data module and initialize it. Table can be enabled with showTable property.
Demo: https://codesandbox.io/s/highcharts-vue-demo-forked-w2m1kt
API reference: https://github.com/highcharts/highcharts-vue#importing-highcharts-modules, https://api.highcharts.com/highcharts/exporting.showTable
Fahd | 1 year ago
I am tryning to create a timeline chart but it tells me :
[Vue warn]: Error in mounted hook: “Error: Highcharts error #17: http://www.highcharts.com/errors/17/?missingModuleFor=timeline
– missingModuleFor: timeline”
i have added the highchartsmore in my main.js and still not working…
Mustapha Mekhatria | 1 year ago
Hi,
As I don’t have access to your code, it is better to get in touch with our support team https://www.highcharts.com/blog/support/
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.