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 section: 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 create your own charts charts with Highcharts-vue wrapper!

3 thoughts on “Highcharts Vue Wrapper”

  • 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?

    • 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))
      }
      })

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.