Jump to content

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


jrp

Recommended Posts

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.

  • Like 1
Link to comment
Share on other sites

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");
    };
}

image.thumb.png.a69271d3a2a769a498559b95c920973c.png

  • Like 1
Link to comment
Share on other sites

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");
    };  
}

 

  • Like 1
Link to comment
Share on other sites

  • 2 years later...
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?

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...