[CLOSED] Bar chart label position

[bayoglu]

Hello,

I need help about bar chart series label positioning and style.
Problems definition:
1) When the value is close to 0, label text goes beyond Y axis line (attached figure, #1).
2) When half of the label instersects bar and rest does not, contrast is not applied to part of text in bar (attached figure #2)
3) I need to make label text Bold but I could not use the FontStyle property.

So,
Can you help me with:
1) Restrict label text as it will not go beyond X=0 line (Related to #1).
2) Tell me if it is possible to partly apply contrast to label text (Related to #2).
3) Please provide a sample to apply font style to label (eg. Bold).

Here is the series markup:

                                            <Series>
                                                <ext:BarSeries Axis="Bottom" XField="ID" YField="Data">                            
                                                    <Label Display="InsideEnd" Field="Data" Orientation="Horizontal" Color="#333" TextAnchor="middle" Contrast="true" FontSize="10">
                                                        <Renderer Handler="return barLabelRenderer(value,label,storeItem,item,i,display,animate,index);" />
                                                    </Label>
                                                    <Renderer Fn="barRenderer" />
                                                </ext:BarSeries>
                                            </Series>

Figure:


Thanks.

[Daniil]

Hi @bayoglu,

1) Restrict label text as it will not go beyond X=0 line (Related to #1).

I think returning an empty string from a Label's Renderer should do the job.

2) Tell me if it is possible to partly apply contrast to label text (Related to #2).

I am afraid it is impossible. Maybe apply a color which would be visible well for the both sides?

3) Please provide a sample to apply font style to label (eg. Bold).

I would try FontWeight="bold" for the Label. Does it help?

[bayoglu]

Hello @Daniil,

Thanks for fast response.
Let's forget issue #2 (;

FontWeight="bold" did not help for issue #3.

About issue#1:

I am already using label renderer to return the text I want to align. If I return empty string from barLabelRenderer than yes issue#1 will disappear but I will also have no label (; I want to show lables as you see in the figure but not go beyond Y axis line.

Thanks.

[bayoglu]

Deleting TextAnchor="middle" and using Display="Outside" eliminated issue #1.

<Label Display="Outside" Field="Data" Orientation="Horizontal" Color="#333" Contrast="true" FontSize="10">

Issue #3 is the only remaining one.

Thanks.

[Baidaly]

Hello!

Deleting TextAnchor="middle" and using Display="Outside" eliminated issue #1.

<Label Display="Outside" Field="Data" Orientation="Horizontal" Color="#333" Contrast="true" FontSize="10">

Issue #3 is the only remaining one.

Thanks.

You can change using Font attribute: http://www.w3schools.com/cssref/pr_font_font.asp

Please, take a look at the following:

<Label 
    Display="InsideEnd" 
    Field="Data1" 
    Orientation="Horizontal" 
    Color="#333" 
    Font="bold 11px Helvetica, sans-serif" />

[Daniil]

Yes, it seems only support the Font option.
http://docs.sencha.com/ext-js/4-2/#!...xt.chart.Label

Sorry for misleading.