3

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.

1574ad6
  • 85
  • 1
  • 11
  • do you look to something like https://v-charts.js.org/#/en/gauge? – Boussadjra Brahim Sep 04 '19 at 10:31
  • Yes, the problem there is, that I cant color code the areas. My values are going from -100 (red) to +100 (green). – 1574ad6 Sep 04 '19 at 11:51
  • you need to load the `gauge` package for google charts, see [load-additional-packages](https://www.npmjs.com/package/vue-google-charts#load-additional-packages) – WhiteHat Sep 04 '19 at 12:35

1 Answers1

1

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.

1574ad6
  • 85
  • 1
  • 11