CODEWITHSUNDEEP
vue.jsvue-component
Liton Arefin
Liton Arefin

Reputation: 11

Creating JustGauge Vue Component

I'm working on a Vue.js Project I need this Download Chart

I tried to create a Component like this.

import '../../../assets/js/lib/gauge/justgage.js';
import '../../../assets/js/lib/gauge/raphael.min.js';


Vue.component('justgauge', {
  name: 'justgauge',
  mounted () {
      var g1;

      document.addEventListener("DOMContentLoaded", function(event) {
        g1 = new JustGage({
          id: "justgauge",
          value: 72,
          //title: "Completed",
          fill: '#ffa726',
          symbol: '%',
          min: 0,
          max: 100,
          donut: true,
          gaugeWidthScale: 0.4,
          counter: true,
          hideInnerShadow: true
        });
     });
   }
})

I'm getting errors like this-

gauge/raphael.min.js Module build failed: SyntaxError: Deleting local variable in strict mode (10:22810)

Note: I've used Justgauge.js and raphael on my Local Library. Any help will be highly appretiate.

Upvotes: 2

Views: 485

Answers (1)

kagronick
kagronick

Reputation: 2688

I made a JustGage component for Vue Js. You can find it here: https://github.com/agronick/KGauge

The gauge you want would look something like this:

      <k-gauge
        title="Completed"
        :value="72"
        :color-steps="['#ffa726']"
        :width="500"
        :height="300"
        :max="100"
        :gauge-size="0.4"
        :format-function="(x) => `${x.toFixed(2)}%`"
        :show-min-max="false"
        :doughnut="true"
        :shadow-opacity="0"
      />

Upvotes: 1

Related Questions