howto adjust LinearGauge to container without cutting scale #278

horchi · 2024-03-07T12:55:18Z

how
Two questions about this LinearGauge snippet.

how to prevent the left-hand scale from get cut
how do you center the entire gauge (including the scale) in the middle of the container (the gray div)?

Here it looks like this:

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
    <meta charset="utf-8">
    <script src="//cdn.rawgit.com/Mikhus/canvas-gauges/gh-pages/download/2.1.7/all/gauge.min.js"></script>
    <script src="gauge-tst.js"></script>
  </head>
  <body>
    <div>
      <div id="container" class="container"></div>
    </div>
  </body>
</html>

JS

document.addEventListener("DOMContentLoaded", function(event) {

   var canvas = document.createElement('canvas');
   canvas.setAttribute('id', 'canvas');
   let container = document.getElementById("container");
   container.appendChild(canvas);
   container.style.width = '200px';
   container.style.height = '200px';
   container.style.background = '#4d4b4b';

   var gauge = new LinearGauge({
      renderTo: 'canvas',
      width: 200,
      height: 200,

      "minValue": 0,
      "maxValue": 120,
      "majorTicks": [0,20,40,60,80,100,120],
      "minorTicks": 5,
      "strokeTicks": false,
      "highlights": [
         {
            "from": 0,
            "to": 20,
            "color": "rgba(255,0,0,.6)"
         },
         {
            "from": 20,
            "to": 120,
            "color": "rgba(0,255,0,.6)"
         }],
      "colorPlate": "transparent",
      "colorBarProgress": "rgb(3, 130, 225)",
      "colorNumbers": "white",
      "fontNumbersSize": 30,
      "borderOuterWidth": 0,
      "borderMiddleWidth": 0,
      "borderInnerWidth": 0,
      "borderShadowWidth": 0,
      "needle": false,
      "valueBox": false,
      "barWidth": 54,
      "numbersMargin": 0,
      "barBeginCircle": 0,
      "tickSide": "left",
      "numberSide": "left"
   });

   gauge.draw();
   gauge.value = 66;
});

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

howto adjust LinearGauge to container without cutting scale #278

howto adjust LinearGauge to container without cutting scale #278

horchi commented Mar 7, 2024 •

edited

Loading

howto adjust LinearGauge to container without cutting scale #278

howto adjust LinearGauge to container without cutting scale #278

Comments

horchi commented Mar 7, 2024 • edited Loading

horchi commented Mar 7, 2024 •

edited

Loading