Creating Custom Charts with HighCharts in Vue

4 min readMay 31, 2022

Let’s see one of the ways of displaying charts on your website.

The sphere of my company and the needs of the clients made me have a pretty interesting experience concerning the charts. In other words, I had to work a lot on them and some of them were really difficult and had really very custom details.

I am sure there are many different ways of using and creating charts, but in this article, we will talk about the way that I used them. And more precisely, we will create the charts with the help of the HighCharts library.

What is HighCharts?

HighCharts is a library made for developers and helps you display all kinds of different charts that you or your client can imagine.

Here is the link: https://www.highcharts.com/

Why use it? Well, as for me, it is one of the libraries that has the most options and that lets you realize the tasks of different levels of complexity.

HighCharts Vue vs HighCharts JS

There are different ways of using the HighCharts on Vue. The first one is the classic one that is made for Vue and is already adopted for it, and the other one is a simple JavaScript one that needs some additional modifications.

What is the main difference between them? It is the performance.

If your needs are pretty simple where you just need to display a regular chart without any custom modifications, you can just use the HighCharts Vue for these purposes. However, if your needs are more complex and require some custom options, you can go for the HighCharts JS.

In this article, we will create a little mix of the classic HighCharts JS using it in the Vue project.

Using HighCharts JS in Vue

Adding the configurations

First things first. Let’s start with the configuration which is pretty simple.

You do not need to download anything but add this line in the header of your main HTML file.

<script src="https://code.highcharts.com/highcharts.js"></script>

This will add the charts to your website and you will be able to display them on your Vue pages.

Creating Vue Component

The best way of using charts in Vue would be to create a separate component that you could use anywhere on the app.

Let’s take as an example a Basic Line Chart.

The final result will look like that:

To display this chart, we will have to create a custom Vue component in a little bit particular way and this is what we have used for it.

<template>
  <div>
    <div></div>
  </div>
</template><script>export default {
name : "BasicLineChart",
props: {
  colors: Array,
  data: Array,
  categories: Array,
  sideText: String
},data : function() {
   return {
      target: undefined
   }
},mounted() { 
   this.target = Highcharts.chart(this.$el, {
     title: {
       text: ''
     },
     subtitle: {  
       text: ''
     },
     colors: this.colors,
     legend: {
       enabled: false
     },
     yAxis: {
       title: {
         text: this.sideText
       }
     },
     xAxis: {
       categories: this.categories
     },
     series: [{
       data: this.data
     }],
     responsive: {
       rules: [{
         condition: {
            maxWidth: 500
         }
      }]
    }
    });
 },
 beforeDestroy: function() {
    this.target.destroy();
 },
}</script>

I know that it looks long and not very clear but these are the options that we are using in HighCharts to set it in the way we want to display the charts.

Each chart, of course, could have its own options but in general, some of the main options remain the same.

Please note that the template is empty and the chart is being created in the mounted function using all of its options.

Using props

If your goal is to make the chart component reusable, it is important to define the props for certain options.

You can see that, for example, we can change such things as “color”, “data”, “categories” and anything else you would want to change.

However, it is very important to check the type of prop that has to be defined. For example, the prop “colors” is waiting for an Array and not for a String, as it might be thought.

Using the component

And now, the final step, which is the usage of our new component on the Vue page.

<BasicLineChart :data="data" :colors="color" :side-text="sideText" :categories="categories"/>

Here is the component with all the main props that we have defined in order to change the color, data, and text.

And of course, this information has to be also defined in the data of the component where we are inserting our chart.

data() {return {data: [30, 12, 58, 44, 12, 46, 89, 67],
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
title: "Test chart", 
sideText: "Some data", 
color: ["#2D9CDB"],}},

Conclusion

This is it! 😊 We have just created our custom Vue Chart with the help of the HighCharts library.

I hope this article was useful for you and I hope as well, you would like to work with charts and customize them in your own way.

Thanks for reading!