Highcharts Vue.js Tutorial

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.