Vue-google-charts issue with candlesticks

Question

I am trying to draw a candlestick chart using vue.js and vue-google-charts. What I have done works with other charts (line, column, pie...) but not with candlesticks. What is wrong in the code bellow?

<template>
  <GChart
      type="CandlestickChart"
      :settings="chartsLib"
      :data="chartData"
      :options="chartOptions"
  />
</template>

<script>
import { GChart } from 'vue-google-charts'
export default {
  components: {
    GChart
  },
  data () {
    return {
      chartsLib: {packages: ['corechart']},
      chartData: [
        ['Mon', 20, 28, 38, 45],
        ['Tue', 31, 38, 55, 66],
        ['Wed', 50, 55, 77, 80],
        ['Thu', 77, 77, 66, 50],
        ['Fri', 68, 66, 22, 15]
      ],
      chartOptions: {
        legend:'none'
      }
    }
  }
}
</script>

Answer 1

when providing the data, you need to include the column headings...

  chartData: [
    ["x", "Low", "Close", "Open", "High"],  // <-- column headings
    ['Mon', 20, 28, 38, 45],
    ['Tue', 31, 38, 55, 66],
    ['Wed', 50, 55, 77, 80],
    ['Thu', 77, 77, 66, 50],
    ['Fri', 68, 66, 22, 15]
  ],