Using HighCharts-vue.js

It has been a while since I published any entry related to VueJS, although it has been the last web framework that has been gutted on the web, and it is the framework with which I currently work and I feel more confortable.

Sincerely, VueJS is very well thought out, whether you work with small projects, or if they are larger. In my case, I build small examples that I am integrating into larger projects and to this day, I do not see another option when working with Javasccript, even with very large projects, that is, always with Vuex, a library that I have not yet spoken about.

Today’s entry is dedicated to including the HighCharts.Js library in VueJs projects, using Highcharts-vue.js, which is Official Highcharts wrapper for Vue framework.

The HTML code

For the example that we are going to make, the goal is to use HighCharts.JS in VueJS projects, which requires the use of HighCharts-Vue.js, so those libraries will be the ones that we have to add. The installation section details how it is installed, although the option we will use is based on the example proposed, once I could solved some problems on it that made not work at first.

As an extra goal, I will include the vue-select library, which is a small extension of VueJS that allows to have selectors. the use of this library allows us to make use of new Vue tools to be used in our future developments. In my case, I have opted to use Vuetify, which includes many options and to which I will dedicate new entries about it.

And the HTML code of the example is:

<!DOCTYPE html>
<html lang="es">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	<title>Manejando Datos - Usando vue-select y Highcharts-vue</title>
	<link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
<style>
	.title-row {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  background: #eee;
	  padding: 20px;
	}
</style>
</head>
<body>

	<div id="app"></div>

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vue-select@latest"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/highcharts-vue@1.3.5/dist/highcharts-vue.min.js"></script>

<script type="text/javascript" src="app.js"></script>

</body>
</html>

I have decided to include inline custom CSS, that is, styles in the HTML itself, because the objective of the example is how to use the library, not to have an excellent appearance, although without a doubt, it does improve a bit.

The javascript code in app.js

App.js is where the Javascript code is, using the particular syntax required by VueJs.

Vue.use(HighchartsVue.default)
Vue.component('v-select', VueSelect.VueSelect);

var app = new Vue({
	el: "#app",
	data() {
		return {
			title: '',
			options: ['spline', 'line', 'bar', 'pie'],
			modo: 'spline',
			series: [
						{
						  data: [15, 3, 6, 2, 6, 4, 5, 5]
						},
						{
						  data: [12, 1, 4, 3, 8, 1, 3, 7]
						},
						],
		}
	},
	computed: {
		chartOptions() { 
			return {
					chart: {  type: this.modo},
					title: {  text: this.title	},
					series: this.series,
			  }
		},
	},
	template:
	`
	<div>
	<div class="title-row">
			<span>Chart title:</span>
			<input type="text" v-model="title">
			<span>Estilo:</span>
			<v-select :options="options" v-model="modo" crearable=False></v-select>
		</div>
		
		<highcharts :options="chartOptions" ></highcharts>
	</div>
	`
})

Perhaps, if you already read the entries of this blog about VueJS, the novelty is in the first two lines: the first allows the use of highcharts, and the second of v-select through the creation of a new component.

The variable app contains the section the to locate the DIV with which VueJS will work, which is called #app, and the section of data, computed and template (where is the HTML code of the component) has been included.

The result of the example is the already known: to be able to select the title of the graph, as well as the type of graph using an option selector.

I hope you enjoy the example and how easy is to include highcharts in your projects.

Happy coding!

The HTML code

The javascript code in app.js

Manejando Datos Newsletter