change font-family Morris Donut Chart

Question

I'm using the very lovely morris donut chart. thing is, I want to change font family for that chart text (inside donut) and cant manage to do it. I will also want to add a 3% padding for inside text...

i tries to add

$("div svg text").attr("style", "font-family: 'Assistant' !important");

but not working for me.

any one have an idea for me? Thx

Answer 1

I have no experience with morris.js, but since you're using jQuery, you can simply use the .css() method, instead of the changing the style attribute.

$('div svg text').css({
    "font-family" : "'Assistant' !important",
    "padding" : "3%"
});

You'll have to wrap the parameters inside an object to take effect.

Answer 2

for change default font familly, you can set gridTextFamily property, default value is sans-serif

Answer 3

I just have the same problem as you. I've find the text inside a Morris Donut Chart is use <tspan> as the last element and it doesn't specify any font-family. So if you only change the higher element but not last. <tspan> will overwrite your style. What you need to do is just basic css.

Add this to your css file.

tspan {
font-family: 'your desire font';
//you can add your extra style too :)
}