Open despotgit opened 5 years ago
You can use like this,
npm i gaugeJS
@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);
@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>
);
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>
I tried by copying dist, min, and somecode, but it never worked.