CODEWITHSUNDEEP
javascriptvue.jsgoogle-visualizationgoogle-gauges
1574ad6
1574ad6

Reputation: 85

How to get gauge chart in vue-google-charts to work - alternatives?

In my vue project, I want to display the NPS score in the form of a gauge chart. The easiest way was to use vue-google-charts. Unfortunately, it seems like this type is not implemented.

vue-google-charts are working on my project. If I stick with the "ColumnChart". When I try to use the gauge chart nothing is displayed and I get an error in the console. 

      type="Gauge"
      :packages="packages"
      :data="chartData"
      :options="chartOptions"
    />

as well as:

      type="gauge"
      :data="chartData"
      :options="chartOptions"
    />

are not working.

Any help is appreciated. If someone has a working example of how to use the google API directly I would do that. But I was not able to get that approach to work.

Upvotes: 3

Views: 947

Answers (1)

1574ad6
1574ad6

Reputation: 85

The right way of doing it was by mixing upper and lower case.

<GChart
:settings="{ packages: ['corechart', 'gauge'] }"
type="Gauge"
:data="raiting.NPS"
:options="chartOptions"
/>

Thank you very much @WhiteHat. I tried it before, but only since you pointed me, that it is the right way, I tried the mix of upper and lower case.

Upvotes: 1

Related Questions