✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
🐇 Announcing Dash VTK for 3d simulation graphics. Check out the March webinar.

Dash_daq Gauge scale text missing in one of three gauges

Hi there, when displaying multiple gauges in my app, there is one Gauge that wont shot its scale properly.
In this example its the ‘temperature’ Gauge where the scale text is missing, while for ‘pressure’ and ‘humidity’ its present:

bad_gauge good_gauge

#!/usr/bin/env python3

import dash
import dash_daq as daq
import dash_core_components as dcc
import dash_html_components as html
from flask import Flask
from dash.dependencies import Input, Output

gauge_vals = {
    'temperature': {
        'min': 10,
        'max': 30,
        'current': 20,
    },
    'humidity': {
        'min': 0,
        'max': 167,
        'current': 32.5,
    },
    'pressure': {
        'min': 0,
        'max': 1000,
        'current': 981.5,
    }
}


def app_layout():
    return html.Div([
        dcc.Checklist(
            id="values",
            options=[
                {'label': 'Temperature', 'value': 'temperature'},
                {'label': 'Humidity', 'value': 'humidity'},
                {'label': 'Pressure', 'value': 'pressure'},
                {'label': 'Altitude', 'value': 'altitude', 'disabled': True},
                {'label': 'Brightness', 'value': 'brightness'},
            ],
            value=['humidity', 'temperature', 'pressure'],
            labelStyle={'display': 'block'},
            className='checklist',
        ),
        html.Div(
            id="content",
            className="content"
        ),
        html.Div([
            daq.Gauge(
                label='temperature-without-callback',
                value=gauge_vals['temperature']['current'],
                min=gauge_vals['temperature']['min'],
                max=gauge_vals['temperature']['max'],
            ),
            daq.Gauge(
                label='pressure-without-callback',
                value=gauge_vals['pressure']['current'],
                min=gauge_vals['pressure']['min'],
                max=gauge_vals['pressure']['max'],
            ),
            daq.Gauge(
                label='humidity-without-callback',
                value=gauge_vals['humidity']['current'],
                min=gauge_vals['humidity']['min'],
                max=gauge_vals['humidity']['max'],
            ),
        ])
    ])


# FLASK SETUP
SERVER = Flask(__name__)

# DASH SETUP
APP = dash.Dash(
    __name__,
    server=SERVER,
    # routes_pathname_prefix='/graph/'
)
APP.title = "test"
APP.layout = app_layout

@APP.callback(Output('content', 'children'),
              [Input('values', 'value')])
def update_current_data(overview_values):
    gauges = []
    for value in overview_values:
        min_val, max_val, last = gauge_vals[value].values()
        gauges.append(
            daq.Gauge(
                label=value,
                value=last,
                min=min_val,
                max=max_val,
            )
        )
    return gauges


if __name__ == "__main__":
    APP.run_server(debug=True, port=5002, host='0.0.0.0')

I could reproduce this on another machine running Linux Manjaro x64 in both Firefox and Chromium.

I have traced it back to the ‘scale’ css section, specificly the tags x and y values both show “NaN” instead of a value:

bad_css good_css

Has anybody encountered this before?