How can I integrate with Angular?

[despotgit]

I tried by copying dist, min, and somecode, but it never worked.

[TaeyeopLee]

You can use like this,

npm i gaugeJS

[RGKrish183]

@TaeyeopLee yes, we have npm package, but how to integate with react,

Cannot read property 'getContext' of null

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
import { Gauge } from "gaugeJS";

const opts = {
  angle: 0.15, /// The span of the gauge arc
  lineWidth: 0.44, // The line thickness
  pointer: {
    length: 0.9, // Relative to gauge radius
    strokeWidth: 0.035 // The thickness
  },
  colorStart: '#6FADCF',   // Colors
  colorStop: '#8FC0DA',    // just experiment with them
  strokeColor: '#E0E0E0'   // to see which ones work best for you
};

function App() {

  
  const target = document.getElementById('foo');
  const gauge = new Gauge(target).setOptions(opts);
  gauge.maxValue = 3000;
  gauge.setMinValue(0);
  gauge.set(1250);
  
  
  return (
    <div className="App">
      <div id="foo"></div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

[TaeyeopLee]

@RGKrish183 how about this ?

return (
    <div className="App">
      <div>
        <canvas id="foo" width="100" height="100"></canvas>
      </div>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );

[danailvidev]

import { Gauge } from "gaugeJS";

 var target = document.getElementById('foo'); // your canvas element
      var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!

<canvas id="foo" width="50" height="50"></canvas>