How to change the font of X labels on UniBarSeries, and make it word wrap?

[jrp]

Hello,

How to change the font of these labels on UniBarSeries? And how to make them word wrap?

Thanks

[picyka]

5 horas atrás, jrp disse:

Olá

Como alterar a fonte desses rótulos no UniBarSeries? E como fazê-los embrulhar palavras?

Obrigado

 

[jrp]

Hi picyka,

Thank you for the link. Google Charts in UniGUI looks very good.

For now, I am in my early learning stage. I think that I should try to stick with whatever comes with UniGUI first.

But in next projects, I will have a closer look at Google Charts.

[jrp]

I can't find any properties related to the font of these labels.

[Sherzod]

1 hour ago, jrp said:

I can't find any properties related to the font of these labels.

Try this (font size):

function chart.beforeInit(sender, config)
{
    config.axes[1].label = {
        fontSize: 14
    }
}

 

[jrp]

Hi Sherzod,

Thank you, the font size worked!

Waiting for the word wrap 😄

[Sherzod]

5 minutes ago, jrp said:

Waiting for the word wrap

Hi,

Item titles are too long?

[jrp]

Yes. Sometimes item titles are long, in my case. And sometimes item titles are shorter, but we have many data (like in the picture above).

[Sherzod]

On 10/3/2021 at 2:48 PM, jrp said:

Yes. Sometimes item titles are long, in my case. And sometimes item titles are shorter, but we have many data (like in the picture above).

Hello,

Try something like this:

function chart.beforeInit(sender, config)
{
    config.axes[1].label = {
        fontSize: 14
    };
    
    config.axes[1].renderer = function(v, l) {
        //{1}-Wrap after one word 
        //{2}-Wrap after two words
        return l.replace(/((?:\w+ ){2})/gi, "$1\n");
    };
}

[jrp]

It worked! Thank you very much Sherzod.

Now my chart.beforeInit looks like this:

function chart.beforeInit(sender, config)
{
    //hide markers
    config.series[0].marker = false;
    
    //change font size
    config.axes[1].label = {
        fontSize: 10
    };
 
    //word wrap
    config.axes[1].renderer = function(v, l) {
        //{1}-Wrap after one word
        //{2}-Wrap after two words
        return l.replace(/((?:\w+ ){1})/gi, "$1\n");
    };  
}

 

[newsanti]

On 10/4/2021 at 7:21 PM, jrp said:

It worked! Thank you very much Sherzod.

Now my chart.beforeInit looks like this:

function chart.beforeInit(sender, config)
{
    //hide markers
    config.series[0].marker = false;
    
    //change font size
    config.axes[1].label = {
        fontSize: 10
    };
 
    //word wrap
    config.axes[1].renderer = function(v, l) {
        //{1}-Wrap after one word
        //{2}-Wrap after two words
        return l.replace(/((?:\w+ ){1})/gi, "$1\n");
    };  
}

 

How to change font  Name of Axes?

[Sherzod]

10 hours ago, newsanti said:

How to change font  Name of Axes?

Desktop?

[newsanti]

1 hour ago, Sherzod said:

Desktop?

Mobile

[Sherzod]

17 hours ago, newsanti said:

config.axes[1].label = {
        fontSize: 10
    };

 

17 hours ago, newsanti said:

How to change font  Name of Axes?

 

Try also adding fontFamily (string).