Using Highcharts within a Vue.js component

Question

Using Highcharts within a Vue.js component

I'm having trouble creating graphical components with Highcharts and Vue.js because I can't figure out how to dynamically set the id attribute that Highcharts needs to render properly.

Does anyone know how to set the id dynamically?

This is the HTML code snippet:

<objective-chart :element="'brick-chart'"></objective-chart>

And here's the JavaScript code snippet:

<template>
    <div id="{{element}}"></div>
</template>

<script>
    import Highcharts from 'highcharts';
    export default{
        props: ['element'],
        created(){
            $(function () {

                new Highcharts.Chart({
                    chart: {
                        renderTo: this.element,
                        type: 'bar',
                        height: 200,
                        margin: [0, 20, 0, 40]
                    },
                    title: {
                        text: null
                    },
                    xAxis: {

                        lineColor: null,
                        labels: {
                            rotation: -90
                        },
                        categories: [
                            'Brick'
                        ]
                    },
                    yAxis: [{

                        min: 0,
                        max:100,
                        endOnTick: true,
                        maxPadding: 0.02,
                        gridLineColor: null,

                        title: {
                            text: null
                        },
                        labels: {
                            y: -50
                        },


                    }],
                    legend: {
                        shadow: false,
                        verticalAlign: 'bottom'
                    },
                    tooltip: {
                        shared: true,
                        followPointer: true
                    },
                    plotOptions: {
                        column: {
                            grouping: true,
                            shadow: false,
                            borderWidth: 0
                        }
                    },
                    credits: {
                        enabled: false
                    },
                    series: [{
                        name: 'Objective',
                        color: 'rgba(224,224,224,1)',
                        data: [100],
                        pointPadding: 0.3,
                        pointPlacement: -0.2
                    }, {
                        name: 'Actual',
                        color: 'rgba(106,166,46,.9)',
                        data: [76],
                        pointPadding: 0.4,
                        pointPlacement: 0.1
                    }, {
                        type:'spline',
                        name: 'Projection',
                        color: 'rgba(106,166,46,.9)',
                        top: 10,
                        pointPlacement: -0.05,
                        data: [95],
                        marker: {
                            radius: 8,
                            lineColor: '#666666',
                            lineWidth: 1
                        }
                    }]
                });
            });
        }
    }
</script>

javascript highcharts vue.js

Answer 1

Answer №1

vue.js 2.0 example demonstrating the use of virtual dom in Vue:
1) Execute npm install highcharts
2) Use

var Highcharts = require('highcharts');

3) Call Highcharts.chart(this.$el, {...}) inside the "mounted" method as this.$el is only accessible after that lifecycle hook
4) Remember to destroy the instance of highcharts in the "beforeDestroy" method.

<template>
<div><div>
</template>

<script>
var Highcharts = require('highcharts');
export default {
    name : "Chart",
    props : {
      series : {
        type: Array,
        required: true
      }
},
  data : function() {
      return {
        target: undefined
      }
    },
    mounted : function() {
      this.target = Highcharts.chart(this.$el, {
        title: {
          text: 'Monthly Average Temperature',
          x: -20 //center
        },
        subtitle: {
          text: 'Source: WorldClimate.com',
          x: -20
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          title: {
          text: 'Temperature (°C)'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '°C'
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
          borderWidth: 0
      },
      series: this.series
    });
  },
  beforeDestroy: function() {
    this.target.destroy();
  },
}
</script>

The parent component would be:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <Chart :series = "initSeries"></Chart>
  </div>
</template>

<script>
import Chart from './Chart.vue';
export default {
  name: 'app',
  components : {Chart},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  computed : {
    initSeries : function() {
      return [{

              name: 'Tokyo',
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
              name: 'New York',
              data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
              name: 'Berlin',
              data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
              name: 'London',
              data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }];

  
     }
   }
}
</script>

Answer 2

vue.js 2.0 example demonstrating the use of virtual dom in Vue:
1) Execute npm install highcharts
2) Use

var Highcharts = require('highcharts');

3) Call Highcharts.chart(this.$el, {...}) inside the "mounted" method as this.$el is only accessible after that lifecycle hook
4) Remember to destroy the instance of highcharts in the "beforeDestroy" method.

<template>
<div><div>
</template>

<script>
var Highcharts = require('highcharts');
export default {
    name : "Chart",
    props : {
      series : {
        type: Array,
        required: true
      }
},
  data : function() {
      return {
        target: undefined
      }
    },
    mounted : function() {
      this.target = Highcharts.chart(this.$el, {
        title: {
          text: 'Monthly Average Temperature',
          x: -20 //center
        },
        subtitle: {
          text: 'Source: WorldClimate.com',
          x: -20
        },
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
          'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
          title: {
          text: 'Temperature (°C)'
        },
        plotLines: [{
          value: 0,
          width: 1,
          color: '#808080'
        }]
      },
      tooltip: {
        valueSuffix: '°C'
      },
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
          borderWidth: 0
      },
      series: this.series
    });
  },
  beforeDestroy: function() {
    this.target.destroy();
  },
}
</script>

The parent component would be:

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <Chart :series = "initSeries"></Chart>
  </div>
</template>

<script>
import Chart from './Chart.vue';
export default {
  name: 'app',
  components : {Chart},
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  computed : {
    initSeries : function() {
      return [{

              name: 'Tokyo',
              data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
          }, {
              name: 'New York',
              data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
          }, {
              name: 'Berlin',
              data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
          }, {
              name: 'London',
              data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
          }];

  
     }
   }
}
</script>

Answer 3

Answer №2

Update: Make sure to see the Vue 2 demonstration by @Tody.Lu, which offers an excellent solution.

To ensure a properly formatted ID selector, utilize renderTo: "#" + this.element.

Alternatively, you may use renderTo: this.$el without specifying an ID at all.

Update: After reviewing my Highcharts component, this is the setup I have:

$(this.$el).highcharts(data);

This method eliminates the necessity for an ID.

Answer 4

Update: Make sure to see the Vue 2 demonstration by @Tody.Lu, which offers an excellent solution.

To ensure a properly formatted ID selector, utilize renderTo: "#" + this.element.

Alternatively, you may use renderTo: this.$el without specifying an ID at all.

Update: After reviewing my Highcharts component, this is the setup I have:

$(this.$el).highcharts(data);

This method eliminates the necessity for an ID.

Answer 5

Answer №3

If you are utilizing a central data store like Vuex, consider adding a chart increment property to keep track of the number of charts created and automatically increment it when a new one is added.

To assign an ID, you can utilize a computed property:

computed: {
  id () {
    return 'chart-' + idValue
  }
}

While it may be tempting to store it in a global variable, that approach is not recommended.

Alternatively, you could generate a random string within your component. One method I have used in the past involves using the UUID generator referenced in this response.

If you choose to use the UUID function UUID.generate() to produce a random string:

data () {
  return {
    uniqueId: UUID.generate()
  } 
}

You can then incorporate the generated uniqueId property into a computed property:

computed: {
  id () {
    return 'chart-' + this.uniqueId
  }
}

This allows you to reference {{ id }} in your Vue instance.

Answer 6

If you are utilizing a central data store like Vuex, consider adding a chart increment property to keep track of the number of charts created and automatically increment it when a new one is added.

To assign an ID, you can utilize a computed property:

computed: {
  id () {
    return 'chart-' + idValue
  }
}

While it may be tempting to store it in a global variable, that approach is not recommended.

Alternatively, you could generate a random string within your component. One method I have used in the past involves using the UUID generator referenced in this response.

If you choose to use the UUID function UUID.generate() to produce a random string:

data () {
  return {
    uniqueId: UUID.generate()
  } 
}

You can then incorporate the generated uniqueId property into a computed property:

computed: {
  id () {
    return 'chart-' + this.uniqueId
  }
}

This allows you to reference {{ id }} in your Vue instance.

Answer 7

Answer №4

Be cautious, in your template there is an error:

<template>
    <div><div>
</template>

You should correct it to this:

<template>
    <div></div>
</template>

Answer 8

Be cautious, in your template there is an error:

<template>
    <div><div>
</template>

You should correct it to this:

<template>
    <div></div>
</template>

Using Highcharts within a Vue.js component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for automatically verifying coupons and adjusting prices

verified firebase/firestore requests

Preventing Angular $rootElement.on('click') from affecting ReactJS anchor tag interactions

Utilize Optional Chaining for verifying null or undefined values

Discovering active path while utilizing dynamic routes - here's how!

The returned JSON object lacks a specified name

Preventing an infinite re-render loop caused by event listeners in React

Display the dropdown selected value within a Laravel Blade template

Error encountered: jQuery AJAX JSON request failed to be caught

Exploring the use of leaflets within LitElement

Passing all emitted events from Vue 3 child component to its parent - A complete guide

Transferring the AJAX response into a JavaScript variable

Find the specific element that is visible within a customized viewport, such as a div or ul

Node.js is essential when using Angular for implementing ui-select components

Using Javascript code within functions.php

How to send parameters to the jQuery delete button click event handler

I'd like to know how to retrieve the start and end dates of a specific month using JavaScript

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

The presence of an unfamiliar custom element, specifically <v-btn>, was detected following the installation of V

Next.js: An absence of response is observed when a high volume of requests is made on a server-side rendering page with