Canvas gauge not displaying properly

andyevansweather commented 6 years ago

Hello,

The gauge is being clipped off at the bottom of the canvas element when I try and display a full gauge as a circle.

gauge

How to reproduce:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>GaugeJS</title>
</head>
<body>
    <h1>GaugeJS</h1>
    <canvas id="foo" style="width: 380px; height: 150px"></canvas>
    <script src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

app.js

var opts = {
    angle: -50, // The span of the gauge arc
    lineWidth: 0.44, // The line thickness
    radiusScale: 1, // Relative radius
    pointer: {
      length: 0.6, // // Relative to gauge radius
      strokeWidth: 0.035, // The thickness
      color: '#000000' // Fill color
    },
    limitMax: false,     // If false, max value increases automatically if value > maxValue
    limitMin: false,     // If true, the min value of the gauge will be fixed
    colorStart: '#6FADCF',   // Colors
    colorStop: '#8FC0DA',    // just experiment with them
    strokeColor: '#E0E0E0',  // to see which ones work best for you
    generateGradient: true,
    highDpiSupport: true,     // High resolution support

  };
  var target = document.getElementById('foo'); // your canvas element
  var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
  gauge.maxValue = 3000; // set max gauge value
  gauge.setMinValue(0);  // Prefer setter over gauge.minValue = 0
  gauge.animationSpeed = 32; // set animation speed (32 is default value)
  gauge.set(1250); // set actual value

serve with http-server https://www.npmjs.com/package/http-server

http-server

Even when adjusting the height of the canvas, it is still clipped.

Any help would be greatly appreciated.

kplindegaard commented 6 years ago

Are you sure the size of your canvas element what you think it is? What I do is that I force the parent div to have a certain size.

<div style="width: 200px; height: 160px; margin: 0 auto">
  <canvas id="TempGauge" gauge-js ng-model="temp" options="tempopt" style="width: 100%; height: 100%"></canvas>
  <div class="gaugeLabel" style="float: right">
    {{ A2Model.Temperature() }} <br/>
    <span style="font-size: 8pt">deg C</span>
  </div>
</div>

Never mind the AngularJS nomenclature, that's just me being lazy.

Anyway, my gauge renders beautifully.

Note also that opt.angle is supposed to be a floating point number between -1 and 1. I've used angle: -0.2 is the example above. That being said, I think your issue is the size and scale of the canvas.

minipunch commented 2 years ago

That was it for me ^

I just had to wrap it in a parent div with a fixed size that was wide / tall enough and then set the canvas height/width to 100%

Thanks!!

bernii / gauge.js

Canvas gauge not displaying properly #190