How to Use Highcharts With Vue

In this article, we’ll see how to install Highcharts for a Vue JS app, and how to use it. Please note that it only serves as an introduction, but if it is successful, I’ll gladly write a tutorial that goes deeper in the configuration of Highcharts.

Highcharts is a very powerful Javascript library that allows us to easily create beautiful & complex charts of all types.

Getting started

We’ll create a dummy project with Vue CLI for the purpose of this tutorial, using ESLint with Airbnb’s configuration.

Install the dependencies

Highcharts has a wrapper called highcharts-vue. You can install it using npm:

1

npm install highcharts-vue 

It seems that the wrapper only offers an API to use Highcharts, but not Highcharts itself. So you’ll also have to install it:

1

npm install highcharts

Importing Highcharts locally in a component

You can use Highcharts in your components individually. It’s very easy, just import it the component. For the sake of this example, we’ll also define a dataset as in the official repo :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { Chart } from 'highcharts-vue';

export default {
  name: 'app',
  components: {
    highcharts: Chart,
  },
  data() {
    return {
      chartOptions: {
        series: [{
          data: [12, 4, 23, 5, 16],
        }],
      },
    };
  },

Then in the template:

1
2
3

<template>
	<highcharts :options="chartOptions"></highcharts>
</template>

You should now have a chart that looks like this:

Registering globally

To import Highcharts globaly, you’ll have to add the following lines to main.js. Add the following lines :

1
2
3
4
5
6

import HighchartsVue from 'highcharts-vue';
import Highcharts from 'highcharts';
import exportingInit from 'highcharts/modules/exporting';

exportingInit(Highcharts);
Vue.use(HighchartsVue, { tagName: 'chart' });

In the last line, you tell Vue to use HighchartsVue that is imported just before, and it will be used in the templates under the name chart. The, in the template of any component, you’ll just have to add the <chart> tag. No need to import any package or library from that component.

1

<chart :options="chartOptions"></chart>

Configuring the chart

There are lots of possible options to pass to the charts. This is just a preview, but please see Highcharts’ docs for more information. You can (and should) also have a look at the examples.

The options will be contained in an object that will then be passed to the :options parameter like that: <highcharts :options="chartOptions"></highcharts>.

Defining the data

Say we want a chart that dislays the average monthly temperatures in France. We also want to define a name for this data. We’ll do it this way:

1
2
3
4
5
6
7
8

chartOptions: {
	series: [
		{
			name: 'France',
			data: [26, 50, 58, 62, 72, 77, 76, 73, 66, 55, 46, 43],
		},
	],
},

series is an array, and you can add as many as you wish:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

series: [
	{
		name: 'France',
		data: [26, 50, 58, 62, 72, 77, 76, 73, 66, 55, 46, 43],
	},
	{
		name: 'Germany',
		data: [33, 39, 44, 49, 59, 68, 66, 67, 57, 52, 41, 40],
	},
],

Name the chart

You can also add a title and a subtitle to the chart:

1
2
3
4
5
6
7
8
9

chartOptions: {
	title: {
		text: 'Average monthly temperature',
	},
	subtitle: {
		text: 'Values are in °F',
	},
	...
},

Defining the axis

You can define the axis to give more meaning to your charts. Either rename the values, or simply give your axis a title like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

chartOptions: {
	...
	xAxis: {
		title: {
			text: 'Period',
		},
		categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
	},
	yAxis: {
		title: {
			text: 'Temperature (°F)',
		},
	},
	...
},

Chart type

Finally you can set the chart type with the type key. The default value is line. Let’s change it for example to bar:

1
2
3
4
5
6

chartOptions: {
	chart: {
		type: 'bar',
	},
	...
},

Keep going

The possibilities to customize your charts are almost infinite. You can easily change pretty much anything: the color of the lines, the position of the legend, the responsiveness of the charts, …