Stacked Bars with Horizontal orientation.

[Technology]

Dear Telerik hello,

i have a problem with the values, in Stacked Bar (Horizontal orientation). See Attached image.
Can i change the position of the values to the end of the second bar (with different color), like the example in the image??

How can i fix this??
ASAP please.

Thank you in advance for your time.

Best Regards,
George.
Navarino Technology Dept.

[Velin]

Hello Technology,

You can use code like this to change the default location of the labels:

ChartSeries s2 = new ChartSeries("2", ChartSeriesType.Bar);
s2.Appearance.LabelAppearance.LabelLocation = StyleSeriesItemLabel.ItemLabelLocation.Inside;

Hope this will help.

All the best,
Ryan
the Telerik team

[Technology]

Dear Ryan,

first of all, happy new year. :-)

I try your code but i cannot make it work with no error.
Can you please help me? Below you will find my code.

Thank you in advance.

Best Regards,
George.
Technology Dept.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Session("UserName") = Nothing Then
            Response.Redirect("~/Default.aspx")
            Exit Sub
        End If

        If (Not Page.IsPostBack) Then

            chTotal.DataSource = GetChartData()
            chTotal.DataBind()

            chTotal.Series(0).DefaultLabelValue = "#Y{N2}"
            chTotal.Series(1).DefaultLabelValue = "#Y{N2}"

            Dim s1 As New ChartSeries("Total", ChartSeriesType.Bar)
            s1.Appearance.LabelAppearance.LabelLocation = Styles.StyleSeriesItemLabel.ItemLabelLocation.Inside
            Dim s2 As New ChartSeries("Total CCC", ChartSeriesType.Bar)
            s2.Appearance.LabelAppearance.LabelLocation = Styles.StyleSeriesItemLabel.ItemLabelLocation.Outside

        End If


    End Sub

Private Function GetChartData() As DataTable

        Dim pCustomerID As New SqlClient.SqlParameter("@CustomerID", 8)
        Dim pFromPeriodID As New SqlClient.SqlParameter("@FromPeriodID", 8)
        Dim pToPeriodID As New SqlClient.SqlParameter("@ToPeriodID", 8)
        Dim pHasPPCTotals As New SqlClient.SqlParameter("@HasPPCTotals", SqlDbType.TinyInt)

        pCustomerID.Value = Session("CustomerID")

        pHasPPCTotals.Value = 1
        pFromPeriodID.Value = cbDateFromChart.SelectedValue
        pToPeriodID.Value = cbDateUntilChart.SelectedValue

        Dim tblResults As DataTable = ExecuteDataTable(ConnectionStrings.WebConnString, "spGetCustomerSpendVessel", New Object() {pCustomerID, pFromPeriodID, pToPeriodID, pHasPPCTotals})

        chTotal.Series(0).DataYColumn = "Total"
        chTotal.Series(1).DataYColumn = "Total_PPC"
        chTotal.PlotArea.YAxis.Appearance.ValueFormat = Styles.ChartValueFormat.Currency
        chTotal.PlotArea.XAxis.DataLabelsColumn = "Vessel"
        chTotal.PlotArea.XAxis.Appearance.LabelAppearance.RotationAngle = 0
        chTotal.PlotArea.XAxis.Appearance.TextAppearance.TextProperties.Color = System.Drawing.Color.DarkBlue
        chTotal.PlotArea.Appearance.Dimensions.Margins.Bottom = Telerik.Charting.Styles.Unit.Percentage(12)

        If tblResults.Rows.Count <= 15 Then
            chTotal.Height = 200
        Else
            chTotal.Height = tblResults.Rows.Count * 15
        End If
        'chTotal.ClientSettings.XScale = 1
        'tblResults.Select("", "Vessel DESC")

        GetChartData = tblResults

        ChartAverage = tblResults.Compute("AVG(Total)", "")
        MinValue = tblResults.Compute("MIN(Total)", "")
        MaxValue = tblResults.Compute("MAX(Total)", "")

        lblInfo.Text = "Average: " & ConvertStringToDecimal(ChartAverage, 2) & "<br />" & _
                       CCCChecks() & "<br />" & _
                       "Min Value: " & ConvertStringToDecimal(MinValue, 2) & "<br />" & _
                       "Max Value: " & ConvertStringToDecimal(MaxValue, 2)



    End Function

[Evgeni "Zammy" Petrov]

Hi,

 Can you send me a runnable project? I have a hard time finding a problem in your source code.
What kind of error are you getting ?

All the best,
Evgeni "Zammy" Petrov
the Telerik team

[Technology]

Dear Evgeni ,

first of all, thank you for your quick respond.

I deleted the vb code and i inserted the same code in ASPX page.
<telerik:ChartSeries Name="Business Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Inside">

It is working now but i have another problem now.
The value that is inside the label (Blue color), is not vertically align correct. (See attached image).

Is there any way to fix this??

Thank you in advance for your time.

Best Regards,
George.
Navarino Technology Dept.

[Evgeni "Zammy" Petrov]

Hello George,

I tried to reproduce your problem but I could not.
Is there anyway you can send me a stripped down project to test?
Also, what binaries are you using?

Best wishes,
Evgeni "Zammy" Petrov
the Telerik team

[Technology]

Dear Evgeni ,

I have the same problem in design mode (see attached image), so i think that the problem is in the HTML code.
Bellow you will find my ASPX page code.
 
I Use:
VB.NET 2008
ASP.NET AJAX v.2010.3.1215.35

Thank you in advance for you support.

Best Regards,
George.
Navarino Technology Dept.

<telerik:RadChart ID="chTotal"
                                  runat="server"
                                  Skin="Inox"
                                  Width="1050px"
                                  SeriesPalette="Mac"
                                  Height="200px"
                                  SeriesOrientation="Horizontal"
                                  AlternateText="Please Wait"
                                  DefaultType="StackedBar">
                                <Series>
                                    <telerik:ChartSeries Name="Business Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Inside">
                                        <Appearance>
                                            <FillStyle FillType="ComplexGradient" MainColor="211, 185, 123">
                                                <FillSettings>
                                                    <ComplexGradient>
                                                        <telerik:GradientElement Color="222, 202, 152" />
                                                        <telerik:GradientElement Color="211, 185, 123" Position="0.5" />
                                                        <telerik:GradientElement Color="183, 154, 84" Position="1" />
                                                    </ComplexGradient>
                                                </FillSettings>
                                            </FillStyle>
                                            <LabelAppearance LabelLocation="Inside"></LabelAppearance>
                                            <TextAppearance TextProperties-Color="White"></TextAppearance>
                                            <Border Color="DarkBlue" />
                                        </Appearance>
                                    </telerik:ChartSeries>
                                    <telerik:ChartSeries Name="CCC Traffic" Type="StackedBar" Appearance-LabelAppearance-LabelLocation="Auto">
                                        <Appearance>
                                            <FillStyle FillType="ComplexGradient" MainColor="149, 193, 204">
                                                <FillSettings>
                                                    <ComplexGradient>
                                                        <telerik:GradientElement Color="172, 208, 217" />
                                                        <telerik:GradientElement Color="149, 193, 204" Position="0.5" />
                                                        <telerik:GradientElement Color="114, 162, 175" Position="1" />
                                                    </ComplexGradient>
                                                </FillSettings>
                                            </FillStyle>
                                            <TextAppearance TextProperties-Color="160, 160, 160"></TextAppearance>
                                            <Border Color="129, 180, 193" />
                                        </Appearance>
                                    </telerik:ChartSeries>
                                </Series>
                                <PlotArea>
                                    <XAxis>
                                        <Appearance Color="Transparent">
                                            <MajorGridLines Color="213, 213, 213" />
                                            <TextAppearance TextProperties-Color="17, 17, 17">
                                            </TextAppearance>
                                        </Appearance>
                                        <AxisLabel>
                                        <Appearance RotationAngle="270"></Appearance>
                                            <TextBlock Text="">
                                                <Appearance TextProperties-Color="17, 17, 17">
                                                </Appearance>
                                            </TextBlock>
                                        </AxisLabel>
                                    </XAxis>
                                    <YAxis>
                                        <Appearance Color="Transparent" MinorTick-Width="0">
                                            <MajorGridLines Color="213, 213, 213" PenStyle="Dash" />
                                            <MinorGridLines Color="213, 213, 213" Width="0" />
                                            <TextAppearance TextProperties-Color="17, 17, 17">
                                            </TextAppearance>
                                        </Appearance>
                                        <AxisLabel>
                                        <Appearance RotationAngle="0"></Appearance>
                                            <TextBlock>
                                                <Appearance TextProperties-Color="17, 17, 17">
                                                </Appearance>
                                            </TextBlock>
                                        </AxisLabel>
                                    </YAxis>
                                    <YAxis2>
                                    <AxisLabel>
                                    <Appearance RotationAngle="0"></Appearance>
                                    </AxisLabel>
                                    </YAxis2>
                                    <Appearance Dimensions-Margins="50px, 12%, 50px, 150px" SeriesPalette="Mac">
                                        <FillStyle FillType="Solid" MainColor="White">
                                        </FillStyle>
                                        <Border Color="142, 142, 142" />
                                    </Appearance>
                                </PlotArea>
                                <Appearance Corners="Round, Round, Round, Round, 10">
                                    <FillStyle FillType="Image">
                                        <FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip">
                                        </FillSettings>
                                    </FillStyle>
                                    <Border Color="111, 111, 111" />
                                </Appearance>
                                <ChartTitle>
                                    <Appearance Position-AlignedPosition="Right" Position-Auto="False"
                                        Position-X="74.5" Position-Y="9">
                                        <FillStyle MainColor="Transparent">
                                        </FillStyle>
                                    </Appearance>
                                    <TextBlock Text="Total Monthly Spend">
                                        <Appearance TextProperties-Color="17, 17, 17" TextProperties-Font="Arial, 16pt"
                                            Dimensions-Margins="5px, 1px, 1px, 10px">
                                        </Appearance>
                                    </TextBlock>
                                </ChartTitle>
                                <Legend>
                                    <Appearance Dimensions-Margins="16%, 3%, 1px, 1px"
                                        Position-AlignedPosition="TopRight">
                                        <ItemTextAppearance TextProperties-Color="Black">
                                        </ItemTextAppearance>
                                        <FillStyle MainColor="Transparent">
                                        </FillStyle>
                                        <Border Width="0" />
                                    </Appearance>
                                </Legend>
                </telerik:RadChart>

[Evgeni "Zammy" Petrov]

Hi George,

You can force the label to appear in the middle of the bar by specifying its position i.e. for each series add series.Appearance.LabelAppearance.Position.AlignedPosition = AlignedPositions.Center

or  in markup:

<LabelAppearance LabelLocation="Inside" Position-AlignedPosition="Center">
</LabelAppearance>

Kind regards,
Evgeni "Zammy" Petrov
the Telerik team

[Technology]

Thank you,
problem solved.