can't set proper pointer value and max value with multiple gauges

[Aydin-ab]

Hello, I have a weird issue using this library

I want to display 3 gauges that I've put in a row
Next to these 3 gauges I want to display the current value in its unit.

Here is my HTML. It's just a row of 3 gauges + a call to a script function

    <div class="Row">
        <div class="Column">
            <div class="center">
                <canvas id="gauge1" class="gauge"></canvas>
                <div id="current_value1" class="current_value"></div>
            </div>
        </div>
        <div class="Column">
            <div class="center">
                <canvas id="gauge2" class="gauge"></canvas>
                <div id="current_value2" class="current_value"></div>
            </div>
        </div>
        <div class="Column">
            <div class="center">
                <canvas id="gauge3" class="gauge"></canvas>
                <div id="current_value3" class="current_value"></div>
            </div>
        </div>
    </div>
    <script>
        init_gauge(data['gauge1']);
        init_gauge(data['gauge2']);
        init_gauge(data['gauge3']);
    </script>

Here is my javacript

function init_gauge(data){
    opts = { }

    let target = document.querySelector('#gauge_' + data['name']) // your canvas element

    let gaugeChart = new Gauge(target).setOptions(opts) // create sexy gauge!

    gaugeChart.max_value = data['max_value'] // set max gauge value
    gaugeChart.setMinValue(0) // Prefer setter over gauge.minValue = 0
    gaugeChart.animationSpeed = 32 // set animation speed (32 is default value)
    gaugeChart.set(data['current_value']) // set actual value

    document.getElementById("current_value" + data['id']).className = "current_value" + data['id'];
    var textRenderer = new TextRenderer(document.getElementById("current_value" + data['id']))
    textRenderer.render = function(gauge){
        this.el.innerHTML = (gauge.displayedValue).toFixed(0) + " " + data["unit"]
     };
    gaugeChart.setTextField(textRenderer);

}

As you can see, my options are empty, I just want to create 3 gauges, set their respective current value and max value and print it in the text renderer. However, I have a weird behaviour where the gauges don't seem to scale with the max_value : If I put a max_value of 30 000 and set value to 6000 then the pointer goes all the way to the end.

Here is a fiddle
https://jsfiddle.net/gjcxsq9e/4/

Thanks a lot !