Jump to content

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


jrp
 Share

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...