I almost always see it being drawn, but then lovelace starts laying out the cards (on an old ipad with the homeassistant app, you can really see this happening) and then the graph disappears…
This looked like a nice component, but broken here as well 
Fixed it by using a suggestion in one of the github issues:
- type: 'custom:buien-rain-forecast'
long: 4.8945
lat: 52.3667
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 10
icon: 'mdi:weather-rainy'
style: |
.chartjs-render-monitor {
height: 200px;
}
It may be you need something like card-mod. I have a couple of these custom components installed.
So how can I make this only appear under the condition there is indeed rain coming?
Is there also a possiblity to hide the time frames or make the amount of rain dynamic in height (so that if 0.3 falls the graphic doesn’t go up till 12 or something 
) t
thanks!
Hey everyone sorry for being off and on the community here - I don’t always get time to mess around with these things. I’m going to check what’s going on with the current card and fix the things mentioned here.
Im also looking at scraping data from buien alarm (I find their data to be more accurate). So will keep you all posted. Cheers!
2 Likes
Maybe it would be possible to provide just some sensors which we can feed into something like mini-graph. That makes more UI tweaking possible and less work for you?
1 Like
Sorry for not doing it the proper Github way (no time to study how it works currently), but I added a tweaked version as issue: https://github.com/lukevink/lovelace-buien-rain-card/issues/12
This version contains annotations (and the plugin included) to make it look more like buienalarm and I tried something else to scale the y-axis a bit better.
I installed using HACS and I can access the .js file from the browser correctly.
It does report “Custom element doesn’t exist: buien-rain-forecast” however.
What can I do to fix this?
One other thing I saw is that the description in hacs shows information about another plugin about a swiping function (no info about the buien-rain-forecast)
Do you have a example how te lovelace card is configured?
Have you added it to Configuration -> Lovelace Dashboards -> Resources?
fillColor: 'rgba(89, 160, 238, 0.2)'
icon: 'mdi:weather-rainy'
lat: <lat>
long: <long>
lineColor: 'rgba(89, 160, 238, 1)'
style:
top: 58%
left: 12%
width: 24%
opacity: 0.75
type: custom:buien-rain-forecast
update_interval: 150
And I put that extra style somewhere.
.chartjs-render-monitor {
height: 170px;
Now I did… did not have to do that for other HACS installs, thought I could ignore that… 
Thanks
Thanks for the fix spudje, by copying your modified JS file this card works.
For reference info:
I installed the original one first via HACS, no need to update lovelace resource configuration. The HACS installation works but the description is indeed wrong (it’s about a swipe card). Just ignore and install.
Then afterwards, overwrite with the adjusted file from spudje. Seems to work now!
How did you do this?
I did the exact same thing as you, but mine doesn’t work.
Can you share your config?
i did this:
Hmm, maybe I was too early. It’s not stable at least.
This is my card config:
type: 'custom:buien-rain-forecast'
icon: 'mdi:weather-rainy'
long: 1.2345
lat: 12.3456
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 300
style:
top: 58%
left: 12%
width: 24%
opacity: 0.75
And do not forget to replace the JS file with the one from Spudje.
It works, however after a while (update_interval?) it stops working and the graph is empty. A page refresh or app restart does the trick again…
doesn’t do anything for me.
Thanks for the config though!
Hope this gets fixed, it was so nice!
@spudje thanks for the code, I could also get it working by overwriting the HACS file with the one you pointed. Just one strange thing : the Y-AXIS remains always set at 10. If I look at the code with the .js file, it’s supposed to scale related to the level of expected rain. I saw there was also some scaleMax paramter which I tried to you in the card config, but no effect.
Any idea why the Y-AXIS doesn’t scale properly ? Could this be a unit definition issue (like . versus , for decimal separator ?)
Here is how my card is configured:
type: 'custom:buien-rain-forecast'
long: 4.xxxx
lat: 50.xxxx
lineColor: 'rgba(89, 160, 238, 1)'
fillColor: 'rgba(89, 160, 238, 0.2)'
update_interval: 10
icon: 'mdi:weather-rainy'
style: |
.chartjs-render-monitor {
height: 200px;
}
Iirc it uses scaleMax as Y-axis max, unless it is not set or smaller than 2,5. Then it will use 2,5. In my code I use a . (dot) for decimals, so maybe using a , (comma) it works for you? line 88, 333 & 336.
Should’ve been a reply to @littlbee
EDIT: Deleted my question.
It is working now, only it shows the graphics on my phone and not on my PC with Chrome browser, as mentioned above by other users. But not big issue for me.
Thanks.
It seems scaleMax has no effect. If I force it to be 2.5 by modifying line 333, it will anyway remain at 10 when drawn. I also changed the ticks portion under the yAxes part of the script, so that suggestedMax is not used, but instead I set max to 4:
ticks: {
// suggestedMax: this.scaleMax,
max: 4,
min: 0,
beginAtZero: true,
// stepSize: 1,
stepSize: 0.5,
mirror: false,
}
None of these changes have any effect. It’s just like the chart/function doesn’t process these at all (even clear my browser cache etc).
Also the last function for the annotions as no effect (no annotation written on the graph).
It’s really a pity as this module is exactly what I was looking for.
Weird, are you sure it uses the edited file? Have you removed the .gz file from the folder and only have the modified .js file?