Solution 1 :

What you’ll want to do is use a ref for your <div> and then register a callback to draw the chart in your component’s mounted hook.

// Load library
google.charts.load('current', {'packages':['corechart']})

const lineChartOptions = {
  title: 'Data Line',
  width: '100%',
  height: 250,
  legend: { position: 'bottom' }

Vue.component('LineChart', {
  template: `<div ref="chart"></div>`, //   set ref here
  data: () => ({
    headings: ['Tiempo', 'Temperatura'],
    chartData: [
      [1,  1000],
      [2,  1170],
      [3,  660],
      [4,  1030]
  methods: {
    drawChart () {
      const dataTable = google.visualization.arrayToDataTable([
      ], false) //   don't forget "false" here to indicate the first row as labels

      const chart = new google.visualization.LineChart(this.$refs.chart) //   use ref here
      chart.draw(dataTable, lineChartOptions)
  mounted () {
    // set the library loaded callback here
    google.charts.setOnLoadCallback(() => this.drawChart())    

As mentioned by Matt, if your component’s template is truly empty save for a single <div>, you can use the $el property to mount the chart without bothering with refs

Vue.component('LineChart', {
  template: `<div></div>`,
  // ...
  methods: {
    drawChart () {
      // ...
      const chart = new google.visualization.LineChart(this.$el)
      chart.draw(this.dataTable, options)

Solution 2 :

As per an update this solution is no longer advisable

A more simple usage would be to use the vue-google-charts plugin

Example code:

 chartData: [
            ['Year', 'Sales', 'Expenses', 'Profit'],
            ['2014', 1000, 400, 200],
            ['2015', 1170, 460, 250],
            ['2016', 660, 1120, 300],
            ['2017', 1030, 540, 350],
        chartOptions: {
            chart: {
                title: 'Company Performance',
                subtitle: 'Sales, Expenses, and Profit: 2014-2017',

Problem :

I’m trying to make a Chart with Google Charts using Vue.js library, but I don’t know how to add to the div.

Here what I’m had tried to do, this is how to add a chart with vanilla javascript (Here the code example of the documentation), I tried to adapt to vue, but nothing happenned:

google.charts.load('current', {'packages': ['corechart']});

Vue.component('line-char', {
    data: function(){
        // Create the data table.
        var data = google.visualization.arrayToDataTable([
            ['Tiempo', 'Temperatura'],
            [1,  1000],
            [2,  1170],
            [3,  660],
            [4,  1030]

        // Set chart options
        var options = {
            'title': 'Data Line',
            'width': '100%',
            'height': 250,
            legend: { position: 'bottom' }

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    template: '<div v-model="chart_div"></div>'


<div id="component">


Comment posted by Matt

+upvote though in this case I would probably go for

Comment posted by Phil

@Matt sure, if there’s nothing else in the template, that would be fine too.

Comment posted by DrakoPD

@Phil Thanks, but I get another error:

Comment posted by Phil

@DrakoPD I assumed you had all that sorted out. I’ll update my answer

Comment posted by DrakoPD

@Phil, Thanks now is working. I had something, but apparently, my method didn’t worked. What was wrong with your past code?

Comment posted by Mahan Hazrati Sagharchi


Comment posted by Anoop Thiruonam

Thank you for letting me know @MahanHazratiSagharchi. I am using it in production.

Comment posted by Skywalker

I see a reference to puppeteer-core in the package-json of vue-google-charts. That is a head-less chrome. I am not sure how the pnpm reference comes in to play, but it is disturbing in my mind.