Can't see value inside gauge when using Vue.js about gaugemeter HOT 12 CLOSED

I still maintain this repo and have a look at your problem. Can you provide me a simple code example? I'm not familiar with Vue.

from gaugemeter.

Thank you! Your gauge is one of the best looking out there, if not the best.

from gaugemeter.

Well, it's actually not mine and a shame that the original developer has given up on this.

from gaugemeter.

@janswist Can you provide more details please. Simple demo implementation?

from gaugemeter.

Sure, here's the fiddle: https://jsfiddle.net/4saoyxt6/

from gaugemeter.

@janswist
There is a typo in your CSS.

.GaugeMeter SPAN,
.GaugeMeter B{
    	Margin:          0 23%;
    	Width:           54%; <--- Width is set to 5% in you Fiddle example
    	Position:        Absolute;
    	Text-align:      Center;
    	Display:         Inline-Block;
    	Color:           RGBa(0,0,0,.8);
    	Font-Weight:     100;
    	Font-Family:     "Open Sans", Arial;
    	Overflow:        Hidden;
    	White-Space:     NoWrap;
    	Text-Overflow:   Ellipsis;
}

from gaugemeter.

So is in readme.me :)

Okay, so we found basic problem. Now an example from production using default css: https://jsfiddle.net/4saoyxt6/11/

and how I managed to overcome this: https://jsfiddle.net/4saoyxt6/15/ but my implementation is not responsive. If I change data-size then I have to search by hand for optimal width in css.

from gaugemeter.

When you look in doc.html it says:

data-size | Any positive integer. | Width & height of the gauge meter in pixels.

Instead of using data-size="150px" just use data-size=150 and it will scale nicely.

from gaugemeter.

And thanks for catching that typo.

from gaugemeter.

No problems. Thanks for maintaining it :) One more question: how to make font bigger? Font-size doesn't seem to react

from gaugemeter.

Unfortunately scaling of label font size is actually hard coded. Change the .22 factor in code:

                $("<span></span>").appendTo(t).html(r).css({
                    "line-height": option.size + "px",
                    "font-size": .22 * option.size + "px",
                    color: fgcolor
                });

Something that could be an option too. Will think about it.

from gaugemeter.

Yeah, that would be a great addition to give even more control over the gauge look and feel like with weight already. Please update this issue when you will decide to implement it :)

from gaugemeter.