How to customize axis label on unichart uni bar

[CITASys Automation]

Hello,

How to customize x axis and y axis label ( font size, font color, font style ) on uni chart uni bar series? 

Thankyou

[Sherzod]

11 minutes ago, CITASys Automation said:

How to customize x axis and y axis label ( font size, font color, font style ) on uni chart uni bar series? 

Hello,

This post may help you:

 

[CITASys Automation]

it work sherzod thankyou, its change the font size, then how to change font color?

 

 

[Sherzod]

4 minutes ago, CITASys Automation said:

then how to change font color?

Try this:

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

 

[CITASys Automation]

okay its work, then how to change x and y axis line color ?

 

[Sherzod]

51 minutes ago, CITASys Automation said:

then how to change x and y axis line color ?

config.axes[0]...  - y

config.axes[1]...  - x

 

[CITASys Automation]

I mean this line, how to change line color, 

 

[PS1]

is this possible ? I need a solution too.

For bar series.

[Sherzod]

I will try to check once again. 

[Sherzod]

On 11/3/2022 at 2:12 PM, CITASys Automation said:

 

3 hours ago, PS1 said:

is this possible ? I need a solution too.

For bar series.

 

I'm trying.

[Sherzod]

Solution:

function chart.beforeInit(sender, config) 
{
    //axisY
    config.axes[0].renderer = function(s, v, a) {
        a.attr.canvasAttributes.strokeStyle = 'green';
        a.attr.canvasAttributes.lineWidth = 1.5;
        return v
        // or using number formatting
        //return Ext.util.Format.number(v, "#.00") 
    };
    
    //axisX
    config.axes[1].renderer = function(s, v, a) {
        a.attr.canvasAttributes.strokeStyle = 'blue';
        a.attr.canvasAttributes.lineWidth = 1.5;
        return v
        // or using number formatting
        //return Ext.util.Format.number(v, "#.00") 
    }; 
}

 

Turns out, I already gave a similar solution:

 

[PS1]

Thank for your response and sorry for my late response(have been out of workplace for the long weekend).

Your solution works, but it destroys other property of UniChart which is Axes->CustomLabels (Example on screenshots below).

How can i set custom labels on the Y-axis and at the same time having your solution for coloring axis?

 

[Sherzod]

I will try to check. 

[Sherzod]

16 hours ago, PS1 said:

[Sherzod]

function chart.beforeInit(sender, config) 
{
    //axisY
    config.axes[0].renderer = function(s, v, a, f) {
        a.attr.canvasAttributes.strokeStyle = 'green';
        a.attr.canvasAttributes.lineWidth = 1.5;

        if (Ext.isArray(s.cLables)) {
            var _a = s.uLastIx;
            if (f === null) {
                _a = 0
            }
            s.uLastIx = _a + 1;
            if (_a < s.cLables.length) {
                return s.cLables[_a]
            }
        }
        if (s.hideLabel == true) {
            return ""
        }

        return v
        // or using number formatting
        //return Ext.util.Format.number(v, "#.00") 
    };

    //axisX
    config.axes[1].renderer = function(s, v, a, f) {
        a.attr.canvasAttributes.strokeStyle = 'blue';
        a.attr.canvasAttributes.lineWidth = 1.5;

        if (Ext.isArray(s.cLables)) {
            var _a = s.uLastIx;
            if (f === null) {
                _a = 0
            }
            s.uLastIx = _a + 1;
            if (_a < s.cLables.length) {
                return s.cLables[_a]
            }
        }
        if (s.hideLabel == true) {
            return ""
        }

        return v
        // or using number formatting
        //return Ext.util.Format.number(v, "#.00") 
    };
}

 

[PS1]

Thanks, it works good ! ❤️