Highcharts Vue.js Tutorial

What is Highcharts

Highcharts is a comprehensive charting solution. It has a wide range of charts, high-levels of interactivity, and great ease-of-use. The biggest downside of Highchart is that it can be expensive to license for commercial offerings.

What is Vue.js?

Vue.js is a progressive JavaScript framework used for building user interfaces and single-page applications (SPAs). It was created by Evan You and is designed to be incrementally adoptable. The core library focuses on the view layer only, making it easy to pick up and integrate with other libraries or existing projects. Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. It has a virtual DOM for faster and more efficient manipulation, composable components, and a relatively low learning curve. It is great for ease-of-use, performance, and overall developer experience.

Highcharts Vue.js Code Example

In this example, we will create a basic column chart using Highcharts with the Vue.js framework. We'll demonstrate how to set up a Vue project, integrate Highcharts, and render a simple chart. Highcharts is a powerful, interactive charting library, and Vue.js is a progressive JavaScript framework that's easy to integrate with different libraries.

Step 1: Setting Up Your Project

First, you need to set up a new Vue.js project. If you haven't installed Vue CLI, you can do it by running the following command:

npm install -g @vue/cli

After installing the Vue CLI, create a new Vue project:

vue create my-highcharts-project

Move to your project directory:

cd my-highcharts-project

Step 2: Installing Highcharts Vue Wrapper

Install highcharts and highcharts-vue via npm:

npm install highcharts highcharts-vue

Step 3: Integrating Highcharts in a Vue Component

Create a component where the chart will be rendered. You can modify the existing HelloWorld.vue file under the src/components folder or create a new component. For this example, we'll work with the HelloWorld.vue component.

Modify the HelloWorld.vue file as follows:

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

<script>
import { Highcharts } from "highcharts-vue";

export default {
 name: "HelloWorld",
 components: {
   highcharts: Highcharts
 },
 data() {
   return {
     // Define the options for your chart
     chartOptions: {
       chart: {
         type: "column"
       },
       title: {
         text: "My First Highcharts Chart in Vue.js"
       },
       xAxis: {
         categories: ["Apples", "Bananas", "Oranges"]
       },
       yAxis: {
         title: {
           text: "Fruit eaten"
         }
       },
       series: [{
         name: "Jane",
         data: [1, 0, 4]
       }, {
         name: "John",
         data: [5, 7, 3]
       }]
     }
   };
 }
};
</script>


Step 4: Running Your Project

Now that everything is set up, you can run your project:

npm run serve

Your Vue.js application should now be running on http://localhost:8080, displaying a simple column chart built with Highcharts.

That's it! You've successfully integrated a Highcharts chart into a Vue.js application. You can now customize your chart and explore more features that Highcharts offers to make your data visualizations more interactive and informative.