Highcharts Vue Wrapper

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!