Icons overlapping text

[hermannw]

Hi @mtatsuma

I updated my MagicMirror to V2.17.1 and installed your module yesterday. It looks like I have the same problem as mentioned in issue #21 . iconWith and iconHeight don't seem to exist in the code any longer and I don't want to make the font smaller. Any suggestions on how to fix this?

Also: Is it possible to suppress the decimal values at the temperature? I don't think the predicted temperature will be THAT precise. :-) Thanks for providing this great module! Hermann

[mtatsuma]

Hi

Thank you for using this module.

When the height in your config is small (e.g. <= 300px), icons may overlap the data labels. It can be avoided if you can set height as larger value (e.g. >= 500px).

Another option is to set datalabelsOffset as a negative value, which makes the space between labels and lines smaller.

When I set height: 300px, fontSize: 18 and datalabelsOffset: -4, it draws following chart.

The iconWidth and iconHeight options became unavailable when I updated Chart.js to v3.x due to a technical problem. If you want to use these options, you can use an old version (e.g. v2.6.0) of MMM-WeatherChart. But I do not recommend to use the older versions because they are not tested well with the latest MagicMirror.

If you share your config options with me, I can check the config in my environment.

[hermannw]

Hi tatsuma,

thanks for the quick answer! I am using MagicMirror in portrait mode and I would like to see the weather prediction in the top bar. So a height bigger than 300px does not look good. This is how it looks now: I did a few more tests with the datalabelOffset. I tried -30 which puts the entire text below the line. Unfortunately it also puts the rain and snow labels below the line. I found a good compromise with the following settings:

        {
            "module": "MMM-WeatherChart",
            "position": "top_bar",
            "config": {
                "apiKey": "xxx",
                "dataNum": 24,
                "dataType": "hourly",
                "height": "250px",
                "width": "1050px",
                "lat": 40.018574,
                "lon": -80.161383,
                "units": "metric",
                "showRain": true,
                //"showZeroRain": false,
                "includeSnow": true,
                "showSnow": true,
                //"showZeroSnow": false,
                "showIcon": true,
                "colorRain": "rgba(39, 84, 245, 0.8)",
                "fillColor": "rgba(108, 137, 241, 0.8)",
                "datalabelsOffset": -4,
                "fontSize": 14
            }
        },

I don't know if it's possible to make the gap between icons and temperature bigger or maybe adjustable.

One thing that makes testing very tedious is that it always takes between 10-15 minutes to load the icons after MM restart. Is that normal? I even set the update interval to 1 minute but it still took 11 minutes to load the icons...

Hermann

[mtatsuma]

Thank you for sharing your problem. I will fix that issue and make more margin between icons and lines. Please give me some time.

[mtatsuma]

I'm sorry for my late response.

I fixed the issue and released v3.2.0 of MMM-WeatherChart. Please clone the latest module and check if your problem is solved.

$ cd ~/MagicMirror/modules
$ git clone https://github.com/mtatsuma/MMM-WeatherChart.git

or

$ cd ~/MagicMirror/modules
$ git clone -b v3.2.0 https://github.com/mtatsuma/MMM-WeatherChart.git

[hermannw]

Thank you tatsuma, that looks great! If yo could suppress the decimal points on the temperature, I would be a very happy camper! :-) I think it would look a lot cleaner and less crowded.

Hermann

[mtatsuma]

I'm sorry for my late response again.

I added a new config option datalabelsRoundDecimalPlace. https://github.com/mtatsuma/MMM-WeatherChart/pull/41

Your problem will be solved by setting this option as 0 on your config after cloning the latest MMM-WeatherChart module.

like the follows

[hermannw]

Wonderful! Thank you very much! Happy New Year!